reactjs 状态更新后未更新React组件

nhhxz33t  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(192)

我有一个由线组成的网格,每条线有:

  • 用户填写的数字输入(amountWithoutTaxe)
  • 一个数字标签,应该在填写完前一个数字标签后自动计算(amountTaxWithe),并且等于前一个数字标签的三倍。

我的期望:用户增加或减少第一个字段,第二个字段将自动更新。例如:我输入2,然后自动显示6。
我得到的:用户增加或减少第一个字段,第二个字段只有在他点击"添加一行"后才会更新。示例:我放了2,什么都没有更新,我点击"添加一行",然后字段更新。
这是Playground
我不明白为什么它没有按预期工作,因为状态在第一次输入更改后刷新

kq0g1dla

kq0g1dla1#

看起来你试图在没有setLines函数的情况下对状态本身做一些改变。如果你这样改变行的属性,React不知道它需要呈现,它需要获得一个新的数组。修复这个问题的方法是在你的onChange函数中创建一个新的变量let newLines = [...lines],并对它做一些改变,然后设置newLines
对于输入元素,请考虑以下更改

<input
      type="number"
      value={line.amountWithoutTaxe}
      onChange={(event) => {
        let newLines = [...lines];
        newLines[index].amountWithoutTaxe = event.target.valueAsNumber;
        newLines[index].amountWithTaxe =
          newLines[index].amountWithoutTaxe * 3;
        setLines(newLines);
      }}
    ></input>

相关问题