从多个子组件更新父组件 state 未考虑更新的 state 值

Question

I have a question related to react js.

I have a scenario where we have a state in the parent component. It has to be updated by child component. So that, based on the state value, I'll do something else in the parent component.

But, If I render multiple child components, the parent's state is getting updated only once.

Could you please help me understand why the state is updating only once and what would be the possible workaround.

Below is the code sandbox link with the example.

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

Thanks.

Answer 1

Refer to the doc:

Unlike the setState method found in class components, useState does not automatically merge update objects.

doc Link .
So you can't pass the old state in a setState() like setCount(count + 1); . Because React will "change" your count value during a re-render and in your case you are calling setCount() many time before React have the time to render again.
And this is also why your console.log(count) displays the previous value.
One solution is this syntax setState(prevState=> prevState+1) .
try this:

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

Answer 2

The problem is caused by the fact that updateCounter has closed over the value of count , so when you call it twice with two child components the 'old' value of count is used both times. You can avoid it by using the 'update' form of useState . This ensures that you will increment the 'current' value of count :

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