更新 React 数组状态

如何解决更新 React 数组状态

我有一个反应应用程序，它从 django api 中提取问题到状态。 我现在面临的问题是，更新特定问题的标题，因为标题输入元素从状态中获取它的值。

下面是我的状态

const [testQuestionForm,setTestQuestionForm] = useState({
        show: true,questions: [
            {
                showCover: true,id: 1,title: "",answer: {
                    type: "",responses: [
                        { id: 1,response: "first" },{ id: 2,response: "second" },{ id: 3,response: "third" },{ id: 4,response: "fourth" }]
                }
            },answer: { type: "",responses: [{ id: 1,response: "null" }] } }
        ]
    })

在我的节目中我必须更新标题的阶段之前， 如果用户想要添加答案或删除答案或执行任何必须触发状态操作的操作，我使用以下逻辑

下面是一个代码示例，它更新了用户希望问题的答案类型

步骤是

1. 我从事件的目标中获得问题 ID。

2. 我将州的问题存储在一个局部变量中 // 我这样做是为了更容易操作，因为我不知道有什么更好的方法可以做到这一点

3. 我用 id 过滤第一个问题的变量值

4. 我做了我想要的更改，然后通过替换所有值再次更新状态

 const setQuestionAnswerType = (event) => {
        const questionId = parseInt(event.target.dataset['questionid']);
        const questionValue = event.target.value;
        const allStateQuestions = testQuestionForm.questions;
        const currentStateQuestion = allStateQuestions.filter(question => question.id === questionId)[0];
        currentStateQuestion.answer.type = questionValue;
        setTestQuestionForm({ ...testQuestionForm,questions: allStateQuestions });

    }

一切似乎都很好，直到我不得不更新问题的标题。 以上步骤对我不起作用，所以我尝试了另一种方法。

以下是我尝试更新问题标题的新逻辑

  const updateTitle = (event) => {
        const question = testQuestionForm.questions.filter(question => question.id === event.target.id)[0];
        setTestQuestionForm({ ...testQuestionForm,questions: [...testQuestionForm.questions,{ ...testQuestionForm.questions.question,title: event.target.value }] })
    }

每当我这样做时，浏览器都会呈现一个空白页面，并且通过 react 在控制台中抛出很多错误。

以下是错误的追溯

TypeError: question.answer is undefined
QuestionComponent
src/Test/components/createTestComponents.js:7

   4 | 
   5 | const QuestionComponent = (props) => {
   6 |     var { question,setTestQuestionForm,testQuestionForm,function2 } = props
>  7 |     var { id,title,answer: { type },showCover } = question;
   8 |     const updateTitle = (event) => {
   9 |         const question = testQuestionForm.questions.filter(question => question.id === event.target.id)[0];
  10 |         

This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

我认为这是因为 question.answer 是一个数组，所以我必须在循环中进行更改或使用相应的高阶数组方法，但我不知道如何在 setTestQuestionForm({}) 函数。

如果上述问题不够合理，请告诉我。