reactjs - 更新 React 数组状态

Question

我有一个反应应用程序，它从 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" }]
                }
            },
            { id: 2, title: "", 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 }] })
    }

每当我这样做时，浏览器都会呈现一个空白页面，并且反应会在控制台中引发很多错误。

下面是错误的回溯

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({})函数中进行。

如果上面的问题不够有意义，请告诉我。

标签： reactjsreact-state