Javascript 显示的数据不会在状态的嵌套循环中更新

发布于07月14日

我有一个物体看起来像这样:

categories : [
    { 
        name: "General Information",
        rows: [
            {
                information1 : "",
                information2 : "",
            }
        ]
    }
]

我使用如下循环显示行内容:

{formData?.categories?.map(c => (
    <div>
        {c.name}
        {c.rows.map((row) => (
        <div>
            <input value={field.information1} />
            <textarea value={field.information2}></textarea>
            <button onClick={() => addRow(c.name)}>Add Row here</button>
        </div>
    ))}
    </div>

))}

当我按下其中一个按钮(应该向行数组添加一行)时，formData状态会更新，但显示的数据不会更新.

function addRow(category) {

    const updatedFormData = formData

    for (const cat of updatedFormData.categories) {
        if (cat.name === category) {
            cat.rows.push({
                information1 : "test",
                information2 : "this is a test"
            })
        } 
    }

    setFormData(updatedFormData)
}

推荐答案

在addRow函数中，在更新formData之前创建formData的副本

function addRow(category) {

    const updatedFormData = {...formData};

    // Make changes to updatedFormData

    setFormData(updatedFormData)
}

我们需要在更新之前创建一个副本，让react知道状态已更改.

考虑一下这个场景，

const obj1 = {a : 1, b: 2};
const obj2 = obj1;
obj2.b = 12;

console.log(obj1 === obj2); // true

obj1和obj2指向同一个对象引用.即使我们更改了b的值，参考也没有更改.类似地，当我们在不创建副本的情况下更新formData的类别时，引用没有更改，并且react无法知道状态已经更新.因此，我们创建一个新对象，将formData的内容复制到其中，然后更新副本并用副本设置状态.

从official docs:

状态可以保存任何类型的JavaScript值，包括对象.但是，不应该直接更改保持在React状态的对象.相反，当你想更新一个对象时，你需要创建一个新的对象(或复制一个现有的对象)，然后将状态设置为使用该副本.

Javascript相关问答推荐

如何在不指定宽度和高度的情况下显示来自网址的下一张图像

nPM审计始终发现0个漏洞

如果没有尾随斜线，托管在收件箱中的React/Vite将无法工作

我试图实现用户验证的reduxstore 和操作中出了什么问题？

fs. writeFile()vs fs.writeFile()vs fs.appendFile()

Plotly热图：在矩形上zoom 后将zoom 区域居中

按下同意按钮与 puppeteer 师

有没有可能使滑动img动画以更快的速度连续？

切换时排序对象数组，切换不起作用

屏幕右侧屏障上的产卵点""

如何通过使用vanilla JS限制字体大小增加或减少两次来改变字体大小

使用Promise.All并发解决时，每个promise 的线性时间增加？

单个HTML中的多个HTML文件

使用领域Web SDK的Vite+Vue应用程序中的Web程序集(WASM)错误

查询参数中的JAVASCRIPT/REACT中的括号

在使用REACT更改了CSS类之后，无法更改CSS样式

ngOnChanges仅在第二次调用时才触发

本地损坏的Java脚本

如何在下一个js中更改每个标记APEXCHARTS图表的 colored颜色

如何在TransformControls模式下只保留箭头进行翻译？

实用课程推荐