arrays - 对象数组未在我的数组状态中正确插入

Question

这是我想在问题数组中推送问题、答案和选项的状态

const [exam, setExam] = useState({
    subjectName: "",
    questions: [
      {
        question: "",
        answer: "",
        options: ["", "", "", ""],
      },
    ],
    notes: [],
  });

我想在数组中推送 15 个不同的问题，这是我的 nextButton 功能

const nextQuestion = () => {

    const que = exam?.questions?.[0]?.question;

    const examQuestionValues = Object.values(exam?.questions).map(
      (ques) => ques.question
    );
    console.log(examQuestionValues, "Exam contains Question Values");

    const questionWithNoDuplicates = examQuestionValues.includes(que);
    console.log(questionWithNoDuplicates, "Question With no Duplicates Values");

    let options = [g?.[0], g?.[1], g?.[2], g?.[3]];
    let optionsWithNoDuplicates = Object.keys(
      options.reduce((a, c) => ({ ...a, [c]: (a[c] || 0) + 1 }), {})
    );

    console.log(value, "value name");
    const newQuestion = {
      question: que,
      answer: value,
      options: optionsWithNoDuplicates,
    };

    if (newQuestion.options.length === 4) {
      console.log(newQuestion, "oooo");
      {
        setExam((prevState) => ({
          subjectName: exam.subjectName,
          questions: [...prevState.questions, newQuestion],
          notes: exam.notes,
        }));
        localStorage.setItem("exam", JSON.stringify(exam));
      }
    } else {
      alert("Same options are not allowed");
      return;
    }

    console.log(exam);
    const length = exam?.questions.length + 1;
    setIndex(length);
    console.log(index);
  };

  const updateItem = (prop, event, index) => {
    const old = exam?.questions[index];
    const updated = { ...old, [prop]: event.target.value };
    const clone = [...exam?.questions];
    clone[index] = updated;
    console.log("clone", clone);
    setExam({ ...exam, questions: clone });
  };

在我的情况下，数据是按先前的顺序推送的，如果我单击第一个状态的 nexrbuttom 即提交考试中的问题 []，因为在我输入数据提交之后，我也希望用户选择选项值然后它将设置为回答输入

<form name="examForm">
        <div>
          <div>
            <label htmlFor="">Subject Name :</label>
            <select
              // disabled={index !== 1}
              onChange={(e) =>
                setExam((prevState) => {
                  exam.subjectName = e.target.value;
                  console.log(prevState);
                  return {
                    ...prevState,
                  };
                })
              }
            >
              <option value="Operating Systems">Operating Systems</option>
              <option value="Data Structures">Data Structures</option>
              <option value="DSP">DSP</option>
              <option value="Data Communication">Data Communication</option>
              <option value="Exam987">Exam987</option>
              <option value="Exam456">Exam456</option>
              <option value="Exam101">Exam101</option>
            </select>
          </div>
          <div>
            <label htmlFor="">Notes :</label>
            <input
              onChange={(e) =>
                setExam((prevState) => {
                  exam.notes[0] = e.target.value;
                  console.log(prevState);
                  return {
                    ...prevState,
                  };
                })
              }
            />
          </div>
          {exam?.questions?.map((item, i) => (
            <div key={i}>
              <label htmlFor="">Questions :</label>
              <input onChange={(e) => updateItem("question", e, i)} />
              <br />
              <br />
              <label htmlFor="">Answer :</label>
              <input
                // onChange={(e) => updateItem("answer", e, i)}
                value={value}
                readOnly
              />
              <br />
              <label htmlFor="">Options</label>
              <br />
              {item?.options?.map((_, u) => (
                <>
                  <FormControlLabel
                    control={<Radio />}
                    onChange={(e) =>
                      setExam((prevState) => {
                        g[u] = e.target.value;
                        console.log(prevState);
                        setValue(e.target.value);
                        return {
                          ...prevState,
                        };
                      })
                    }
                    value={g[u]}
                    disabled={!g[u].length > 0}
                  />
                  <input
                    type="text"
                    onChange={(e) =>
                      setExam((prevState) => {
                        exam.questions[0].options[u] = e.target.value;
                        console.log(prevState);
                        return {
                          ...prevState,
                        };
                      })
                    }
                  />
                  <br />
                </>
              ))}
            </div>
          ))}
        </div>
      </form>

标签： arraysreactjs