React useState - 將所有對象值更新為 true

Question

我在文件中定義了一個對象，如下所示：

export const items = {
  first: false,
  second: false,
  third: false
}

我在一個組件中使用它，如下所示：

import { items } from 'file';
const [elements, setElements] = useState(items);

我有一個在單擊按鈕時被調用的方法 - 該方法應該將elements中的所有值更改為true

使用以下更改值但它不會觸發組件的重新渲染（這是我需要的）

Object.keys(elements).forEach(element => elements[element] = true);

如何使用setElements更新elements中的所有值？

Answer 1

您面臨的問題是您正在改變狀態對象，這意味着最后， prevState === nextState和 React 退出渲染。 一種選擇是使用新對象並像這樣復制道具，使用相同的Object.keys和forEach組合，但添加了一個額外的步驟：

setState(prevState => {
  const nextState = {}
  Object.keys(prevState).forEach(key => {
    nextState[key] = true
  })
  return nextState
})