Reactjs setState的回调函数仅填充最后一个组件'；s状态到父组件'；渲染时的状态

我有一个回调函数，以便将子组件的状态传递给父组件的状态

当所有子组件加载时，我希望它们执行回调函数并填充父组件的状态

虽然只有最后一个组件似乎将其状态传递给父组件

---

我的孩子部分：

import React, { useState, useEffect } from "react";

export default function Component(props) {
  const [state, setState] = useState(0);

  useEffect(() => {
    var index = props.index;
    var stateSchema = {};
    stateSchema[index] = state;
    props.updateState(stateSchema);
  }, [state]);

  function onLeftClick() {
    setState(state + 1);
  }

  return <p onClick={onLeftClick}>{state}</p>;
}

import React, { useState, useEffect } from "react";
import Component from "./Component";

export default function ParentComponent() {
  const [state, setState] = useState({});

  function updateState(updatedState) {
    setState({
      ...state,
      ...updatedState
    });
  }

  useEffect(() => {
    console.log(state);
  }, [state]);

  return (
    <div>
      <Component index="a" updateState={updateState} />
      <Component index="b" updateState={updateState} />
      <Component index="c" updateState={updateState} />
      <Component index="d" updateState={updateState} />
      <Component index="e" updateState={updateState} />
    </div>
  );
}

import React，{useState，useffect}来自“React”；
导出默认功能组件（道具）{
const[state，setState]=useState（0）；
useffect（（）=>{
var指数=道具指数；
var stateSchema={}；
stateSchema[索引]=状态；
props.updateState（stateSchema）；
}，[州]；
函数onLeftClick（）{
设置状态（状态+1）；
}
返回
{state}
；
}

我的父组件：

import React, { useState, useEffect } from "react";

export default function Component(props) {
  const [state, setState] = useState(0);

  useEffect(() => {
    var index = props.index;
    var stateSchema = {};
    stateSchema[index] = state;
    props.updateState(stateSchema);
  }, [state]);

  function onLeftClick() {
    setState(state + 1);
  }

  return <p onClick={onLeftClick}>{state}</p>;
}

import React, { useState, useEffect } from "react";
import Component from "./Component";

export default function ParentComponent() {
  const [state, setState] = useState({});

  function updateState(updatedState) {
    setState({
      ...state,
      ...updatedState
    });
  }

  useEffect(() => {
    console.log(state);
  }, [state]);

  return (
    <div>
      <Component index="a" updateState={updateState} />
      <Component index="b" updateState={updateState} />
      <Component index="c" updateState={updateState} />
      <Component index="d" updateState={updateState} />
      <Component index="e" updateState={updateState} />
    </div>
  );
}

import React，{useState，useffect}来自“React”；
从“/Component”导入组件；
导出默认函数ParentComponent（）{
const[state，setState]=useState（{}）；
函数updateState（updatedState）{
设定状态({
……国家，
…更新状态
});
}
useffect（（）=>{
console.log（状态）；
}，[州]；
返回(
);
}

在控制台中，我通常会看到

对象{e:0，a:0，b:0，c:0，d:0}

但我明白了

对象{}

对象{e:0}

这是我的工作代码：

---

如果您有任何建议，我将不胜感激。

setState

操作是异步的，并且是为提高性能而批处理的。setState的文档中对此进行了解释

setState（）不会立即改变this.state，但会创建 等待状态转换。调用此命令后访问this.state 方法可能返回现有值。没有 保证对setState的调用和可能发生的调用的同步操作 为提高性能而进行批处理

因此，在

updateState

函数中，当调用它时，状态尚未更新

function updateState(updatedState) {
    // state is {}
    setState({
      ...state,
      ...updatedState
    });
  }

要使其正常工作，请按如下方式更新代码：

function updateState(updatedState) {
    setState(prevState => ({
      ...prevState,
      ...updatedState
    }));
  }

更多信息请点击此处：