从多个子组件更新父组件状态而不考虑更新的状态值答案

【问题标题】：Updating Parent component state from multiple child components not taking updated state value into account从多个子组件更新父组件状态而不考虑更新的状态值
【发布时间】：2021-03-08 09:31:42
【问题描述】：

我有一个关于 react js 的问题。

我有一个场景，我们在父组件中有一个状态。它必须由子组件更新。因此，基于状态值，我将在父组件中执行其他操作。

但是，如果我渲染多个子组件，父组件的状态只会更新一次。

能否请您帮助我了解为什么状态只更新一次以及可能的解决方法。

下面是示例代码沙箱链接。

https://codesandbox.io/s/heuristic-cori-8793u?file=/src/App.js

谢谢。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

问题是由于updateCounter 已经关闭了count 的值，因此当您使用两个子组件调用它两次时，两次都使用count 的“旧”值。您可以通过使用useState 的“更新”形式来避免它。这可确保您增加 count 的“当前”值：

const updateCounter = (num) => {
  setCount(c => c + 1);
  console.log(count);
};

【讨论】：

【解决方案2】：

参考文档：

与类组件中的 setState 方法不同，useState 不会自动合并更新对象。

doc Link.
所以你不能像setCount(count + 1); 这样在setState() 中传递旧状态。因为 React 会在重新渲染期间“更改”您的 count 值，并且在您的情况下，您在 React 有时间再次渲染之前多次调用 setCount()。
这也是为什么您的 console.log(count) 会显示之前的值。
一种解决方案是这种语法setState(prevState=> prevState+1)。
试试这个：

import "./styles.css";
import { useEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  const updateCounter = () => {
    setCount((prevCount) => prevCount + 1);
  
  };

  useEffect(() => {
    console.log("Do Something Based On Count Value.");
  }, [count]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox {count}</h1>
      <ChildApp onLoad={updateCounter} />
      <ChildApp onLoad={updateCounter} />
      <ChildApp onLoad={updateCounter} />
    </div>
  );
}

export function ChildApp({ onLoad }) {
  console.log("Child Loaded");
  useEffect(() => {
    onLoad();
  }, []);
  return (
    <div className="App">
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

codeSanBox

【讨论】：