在React中比较两个对象数组，然后相应地选中复选框

Question

在React中，我正在创建一个选择题调查表。将生成带有可能答案的复选框。当用户勾选答案并重新加载页面时，所选答案的复选框不会保留其选中状态。

问题和答案在第一次加载时作为对象数组从数据库中获取。用户可以在一个问题的多个复选框中打勾。创建第二个数组，其中包含用户选择并发送到数据库的所有多个答案都有对象。重新加载时，此第二个数组将与第一个数组一起添加到组件的状态。

组件

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 
    }));
  }
}

我想比较this.state中的这2个数组，如果array2中的答案在array1中，则选中相应的复选框。有没有更好的方法，请教我！