反應：useState 數組未更新

Question

推送數組時，會推送數據。 但是，如果您簽入 console.log，則不會導入數據。 這似乎是一個延遲。 你能告訴我為什么會這樣嗎？

有解決方案嗎？

預期的 console.log 結果顯示輸入，但是顯示空數組，如果再次單擊復選框，則會出現輸入。

  const [checked, setChecked] = useState<number[]>([])

  const handleAddListToArray = (id: number) => {
    console.log(checked)
    if (setChecked.includes(id)) {
      setChecked(checked.filter((item) => item !== id))
    } else {
      setChecked([...checked, id])
    }
  }

--- checkbox compornent ---

  const [isChecked, setIsChecked] = useState(false)

  const handleChange = () => {
    setIsChecked(!isChecked)
    handleAddListToArray(id)
  }

 <Checkbox checked={isChecked} onClick={() => handleChange()} />

Answer 1

當您推送數組時，會推送數據，但是如果您簽入 console.log，則不會導入數據。 這似乎是一個延遲你能告訴我為什么會這樣嗎？

狀態設置函數是異步的。 換句話說，如果你寫：

const [foo, setFoo] = useState(0);
setFoo(1);
console.log(foo); // logs 0, NOT 1

你會看到0記錄，而不是1 ... 至少最初是這樣。 但是，下面會有一個顯示1的日志條目。

這是因為 set* function 不會更改 function 中的值，但它們確實會導致組件在之后重新渲染，這意味着 ZC1C425268E68385D145074C17A4 再次使用正確的值。

但是顯示空數組，如果再次單擊復選框，則會出現輸入。

這是因為這段代碼：

setIsChecked(!isChecked)

最初您將isChecked設置為一個數組：

setChecked(checked.filter((item) => item !== id))

但是后來您將其更改為!isChecked ... a boolean 。 一旦將其更改為 boolean，就無法將其更改回數組。

Answer 2

您在第四行代碼中檢查 setState 函數是否包含輸入：

if (setChecked.includes(id))

我相信您想改為檢查檢查狀態，如下所示：

if (checked.includes(id))

此外，當您根據前一個突變 state 時，請考慮使用 useState-callback。 所以而不是：

setChecked(checked.filter((item) => item !== id))

嘗試：

setChecked((prevState) => prevState.filter((item) => item !== id))

您也可以在設置 isChecked state 時使用它。 這可確保您獲得最新的已知 state 並避免進入一些奇怪的狀態，因為 React 會異步更新 state。

Answer 3

一些建議

if (setChecked.includes(id)) {

應該是（setChecked 是一個函數）

if (checked.includes(id)) {

對於setChecked(checked.filter((item) => item !== id))

更好的用法將是

setChecked(prevCheckedValues => prevCheckedValues.filter((item) => item !== id));

這樣，當您執行 setChecked 時，您將始終獲得當前檢查的值。

另一種使用方法是通過useCallback並將依賴數組作為[checked]傳遞

如果您想在每次更改時打印checked的值，您可以使用帶有正確依賴數組的useEffect ( docs )。

使用示例

useEffect(()=>{
   console.log("Checked", checked);
}, [checked])