如何在React功能组件中立即更新状态？

Question

我是React的新手，对功能组件的生命周期感到非常困惑。假设我有许多类型的输入：复选框，a，b，c和d。它们的值是a，b，c和d。

const OnBoarding = () => {
  const [isChecked, setIsChecked] = useState({
    a: false,
    b: false,
    c: false,
    d: false
  });
  
  const allCheckedItems, setAllCheckedItems = useState([]);
  
  //Write function that pushes checked value to state array when clicked
  const onChecked = e => {
    setIsChecked({
      ...isChecked,
      [e.target.value]: e.target.checked
    });
    const all = Object.keys(isChecked).filter(function(key){
      return isChecked[key] === true;
    });
    console.log("all items that are TRUE : " + all);
    setAllCheckedItems([all]);
    console.log("allCheckedItems : " + allCheckedItems);
  };
  
  useEffect(() => {
    console.log(isChecked);
  });
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我有一个功能组件，其状态为类型为[[object的状态，具有许多属性，所有布尔值，例如：

const [isChecked, setIsChecked] = useState({
  a: false,
  b: false,
  c: false,
  d: false
})

我还有一个其他状态，它是
array

，我们称它为[[allCheckedItems，它应该是设置为true的isChecked所有键的数组。const [allCheckedItems, setAllCheckedItems] = useState([]); 使用onChecked函数，当选中一个复选框时，它在

isChecked

对象中的值设置为

true

。我调用useEffect（），在其中编写了一个过滤器函数来过滤所有正确的属性。所有设置为true的属性都存储在名为“ all”。]的数组中。

我的问题在我必须更新数组allCheckedItems

的状态时出现。如果我在useEffect挂钩中写：

setAllCheckedItems([all]);

我遇到无限循环。如果我在

onChecked函数

中编写它，则每当我单击一个复选框时，我在控制台中登录的allCheckedItems的状态都为单击后的状态。像，我单击以选中“ a”，它记录为：

[]

然后我单击“ b”，它记录：

[a]
然后我单击“ c”，它记录：

[a, b]
我希望当我选中一个框时，两个状态都会更新，并且allItemsChecked会立即记录所有选中的项目...有人可以向我解释这种行为吗？现在已经让我头疼了几天。

我是React的新手，对功能组件的生命周期感到非常困惑。假设我有许多类型的输入：复选框，a，b，c和d。它们的值为a，b，c和d。 const ...

Answer 1