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 === nextStateReact 会退出渲染。一种选择是使用一个新对象并像这样复制道具，使用相同的Object.keys和组合，forEach但添加额外的步骤：

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