javascript - 渲染文本输入后使用 useState Hook 更新对象

Question

我正在为我们公司构建调试 list 应用程序的早期过程。由于 list 相当大(其中很多)，我想创建一个映射对象的函数，并在渲染写入的值后使用 useState Hook 更新适当的状态。

页面呈现没有任何问题。只有在输入更改后才会出现此问题。而不是更新对象中的正确状态。看起来逻辑是在我的对象中添加一个额外的部分并创建另一个输入元素。

import React, { useState } from 'react'


const ProjectInfo = () => {

  const _renderObject= () => {
     return Object.keys(answers).map((obj, i) => {
        return(
            <div key={obj}>
                <label>{answers[obj].question}</label>
                <input type="text" onChange={(e, obj) => setAnswer(
                    {
                    ...answers,
                    obj:{
                       value: e.target.value
                    }})} />    
            </div>
        )
    })
}

const [answers, setAnswer] = useState({
    11:{
        question:"Project Name",
        value:""
    },
    12:{
        question:"Project Number",
        value:"" 
    }
})

    return(
        <div>
            <section>
                {_renderObject()}
            </section>
            <p>{`Project Number is: ${answers[11].value}`}</p>
            <p>{`Project Name is: ${answers[12].value}`}</p>
        </div>
    )
}

export default ProjectInfo

我原以为状态会正常更新。但我怀疑在我的 renderObject 方法中，我的 .map 函数的 obj 变量没有在我的 setAnswer 函数中使用，并导致使用键名“obj”创建另一个字段。

如果这是问题所在，是否可以让我的 renderObject 方法中的 setAnswer 函数使用 map 函数的“obj”值而不是单词 obj 的实际值作为键？

如果不是，最好的方法是什么？我正在考虑在屏幕底部添加一个提交按钮并使用 onClick 事件监听器更新所有状态。但现在我想我会遇到同样的问题，因为 obj 变量的范围没有解决。

如有任何帮助，我们将不胜感激。我只做了几个月，任何建议和反馈也将不胜感激!

Answer 1

更新状态时，您似乎没有正确使用动态 key 。您还需要更新 key 中的值而不是覆盖它。此外，obj 不应是 onChange 的第二个参数，而必须从封闭范围接收它

const _renderObject= () => {
     return Object.keys(answers).map((obj, i) => {
        return(
            <div key={obj}>
                <label>{answers[obj].question}</label>
                <input type="text" onChange={(e) => setAnswer(
                    {
                    ...answers,
                   [obj]:{
                       ...answers[obj],
                       value: e.target.value
                    }})} />    
            </div>
        )
    })