狀態更新后反應組件未更新

Question

我有一個由線組成的網格。 每行有：

• 用戶填寫的數字輸入 (amountWithoutTaxe)
• 一個數字標簽，應該在前一個被填充后自動計算（amountWithTaxe）並且等於前一個的三倍。

我期望的是：用戶增加或減少第一個字段並自動更新第二個字段。 示例：我輸入 2，則自動顯示 6。

我得到的：用戶增加或減少第一個字段，第二個字段僅在他點擊“添加一行”后更新。 示例：我輸入 2，沒有任何更新，我點擊“添加一行”，然后該字段被更新。

這是游樂場https://codesandbox.io/s/react-tsx-playground-forked-bss6sh?file=/src/index.tsx

我不明白為什么它沒有按預期工作，因為在第一次輸入更改后狀態會刷新

Answer 1

似乎您正在嘗試在沒有 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>