Мне нужна ваша помощь, чтобы исправить отображение переключателей, отмеченных в зависимости от статуса уведомления пользователя.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я передаю isNotification, и если другой ключ (другой сегмент объекта} имеет то же значение, checked не отображается в пользовательском интерфейсе. Я хочу знать, почему происходит эта странная вещь, и что мне не хватает для правильного отображения.

Вот соответствующие коды и скриншоты: Notifications.js:

import React from 'react';

import NotificationForm from './NotificationForm';

class Notifications extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
// get notificationData object from backend
    this.props.notificationData.map((section) => this.props.fetchIsNotification(section.slug));
  }

  render() {
    // render empty tags until all API call finishes
    if (this.props.notificationData.some((data) => data.isNotification === undefined)) {
      return <div />;
    }
    return (
      <section>
        <form
          action={`/settings/notifications`}
          acceptCharset="UTF-8"
          method="post"
        >
          <input type="hidden" />
          {this.props.notificationData.map((section) => {
            return (
              <NotificationForm
                key={section.slug}
                slug={section.slug}
                text={section.caption}
                isNotification={section.isNotification}
                dispatch={this.props.updateIsNotification}
              />
            );
          })}

          <button type="submit">
            Update notification
          </button>
        </form>
      </section>
    );
  }
}

export default Notifications;

NotificationForm.js:

import React from 'react';

const NotificationForm = ({ text, slug, isNotification, handleUpdate }) => {
  return (
    <>
      <h1>{text}</h1>
      <div htmlFor={1}>
        <label>
          <input
            id={1}
            type="radio"
            name="true"
            value="true"
            checked={isNotification === true}
            onChange={(e) =>
              dispatch({
                type: 'FETCH_IS_NOTIFICATION_FULFILLED',
                payload: e.currentTarget.value,
                slug,
              })
            }
          />
          Notify me
        </label>
        <label htmlFor={2}>
          <input
            id={2}
            type="radio"
            name="false"
            value="false"
            checked={isNotification === false}
            onChange={(e) =>
              dispatch({
                type: 'FETCH_IS_NOTIFICATION_FULFILLED',
                payload: e.currentTarget.value,
                slug,
              })
            }
          />
          Do not notify me.
        </label>
      </div>
    </>
  );
};

export default NotificationForm;

This.props.notificationData пример данных начального состояния редуктора:

const initialState = {
  notificationData: [
    {
      slug: 'receive_dm',
      caption: 'Whe you received DM',
      isNotification: false,
    },
    {
      slug: 'like_comment',
      caption: 'When you got like',
      isNotification: false,
    },
    {
      slug: 'comment_post',
      caption: 'When you got comment',
      isNotification: false,
    },
    {
      slug: 'community_post',
      caption: 'When someone posted on your community',
      isNotification: true,
    }
  ]
};

Как вы видите на снимке экрана, поскольку объект с ярлыком receive_dm, link_comment и comment_post имеет одно и то же значение, isNotification: false, переключатели не отмечены. И строка community_post проверяется, потому что isNotification: true не имеет того же значения, что и isNotification других строк.

enter image description here

Однако я вижу свойство checked в теге ввода в инструменте разработчика для receive_dm, link_comment и comment_post 🤨 введите описание изображения здесь

1
misakimichy 1 Мар 2021 в 23:43

1 ответ

Лучший ответ

Радиокнопки сгруппированы по атрибуту имени тегов ввода. В вашем коде вы написали name = "true" или name = "false" для тегов ввода. Это не так. поэтому все теги ввода, у которых есть name = "true", находятся в одной группе и такие же, как для name = "false".

Пожалуйста, попробуйте следующий код.

import React from 'react';

const NotificationForm = ({ text, slug, isNotification, handleUpdate }) => {
  return (
    <>
      <h1>{text}</h1>
      <div htmlFor={1}>
        <label>
          <input
            id={1}
            type="radio"
            name={slug} // it must be uniqe for groups and same in one group
            value="true"
            checked={isNotification === true}
            onChange={(e) =>
              dispatch({
                type: 'FETCH_IS_NOTIFICATION_FULFILLED',
                payload: e.currentTarget.value,
                slug,
              })
            }
          />
          Notify me
        </label>
        <label htmlFor={2}>
          <input
            id={2}
            type="radio"
            name={slug} // it must be uniqe for groups and same in one group
            value="false"
            checked={isNotification === false}
            onChange={(e) =>
              dispatch({
                type: 'FETCH_IS_NOTIFICATION_FULFILLED',
                payload: e.currentTarget.value,
                slug,
              })
            }
          />
          Do not notify me.
        </label>
      </div>
    </>
  );
};

export default NotificationForm;
1
Artem Medianyk 1 Мар 2021 в 20:52