Блог

В React я создаю анкету с несколькими вариантами ответов. Флажки генерируются с возможными ответами. Когда пользователь помечает ответы и перезагружает страницу, флажки выбранных ответов не сохраняют свое проверенное состояние.

Вопросы и ответы извлекаются из базы данных в виде массива объектов при 1-й загрузке. Пользователь может установить несколько флажков для вопроса. Создается 2-й массив, который включает в себя все множественные ответы, выбранные пользователем и отправленные в объекты database has. При перезагрузке этот 2-й массив добавляется к состоянию компонента так же, как и 1-й массив.

Компонент

 const Checkbox = ({ id, name, options, onChange }) => {
  return (
    <div className="checkbox-group">
      {options.map((option, index) => {
        <div key={index}>
          <label htmlFor={id}>
            <input
              type="checkbox"
              name={name}
              id={id}
              value={option}
              onChange={onChange}
            />
            {option}
          </label>
        </div>
      }
    </div>
  );
}
  

 class Form extends Component {
  constructor(props) {
    super(props);

    this.state = {
      questionnaire: [],
      answeredQuestions: [],
      formData: {},
    };

    this.handleChange = this.handleChange.bind(this);
  }

  async componentDidMount() {
    // it doesn't matter how I fetch the data, could have been axios, etc...
    let questionnaire = await fetch(questionnaireUrl);
    let answeredQuestions = await fetch(answeredQuestionsUrl);

    this.setState({ questionnaire, answeredQuestions });
  }

  render() {
    return (
      <div className="questionnaire-panel">

        <h1>Quiz</h1>

        {this.state.questionnaire.map((question, index) => {
          return (
            <div key={index}>
              <Checkbox
                options={questions.answers}
                checked={// this where I'm stuck on what to do}
                name="the-quiz"
                id={`the-quiz_num_${index   1}`}
                onChange={this.handleChange}
              />
            </div>
          )
        })}
      </div>
    );
  }

  handleChange(event) {
    let target = event.target;
    let value = target.value;
    let name = target.name;

    let chosenAnwersArray = [];

    let chosenAnswer = {
      answer: value,
      checked: true,
    };

    if (this.state.questionnaire.includes(chosenAnswer)) {
      newChosenAnwersArray = this.state.questionnaire.filter(q => {
        return q.answer !== chosenAnswer.answer;
      });
    } else {
      newChosenAnwersArray = [...newChosenAnwersArray, chosenAnswer];
    }

    this.setState(prevState => ({
      formData: {
        [name]: value,
      },
      answeredQuestions: newChosenAnwersArray 
    }));
  }
}
  

Я хочу сравнить эти 2 массива, которые находятся в this.state , чтобы, если ответы в массиве 2 находятся в массиве 1, тогда установите соответствующие флажки. Есть ли лучший способ, пожалуйста, научите меня!