如何将组件的所有状态存储在一个数组中，然后将其传递给父级？答案

【问题标题】：How can I store all states of a component in one array and then pass it to parent?如何将组件的所有状态存储在一个数组中，然后将其传递给父级？
【发布时间】：2021-04-01 02:23:46
【问题描述】：

所以，我有一个组件包含多个具有不同反应状态的子组件。比如标题、关键词、地点、日期等
如何将所有状态存储在一个数组（信息）中？这个数组的每个元素都应该是一个对象
存储后，需要传递给父组件。

const CreateEventsBasic = () => {
  const [info, setInfo] = useState([]);
  return (
    <div className="create-event-basic">
      <BasicInfo/>
      <Keywords />
      <Location />
      <Date />
      <LinkToTheGroup />
    </div>
  );
};

【问题讨论】：

在 React 中，数据向下流动，而不是相反。您可以做的是在父组件中拥有状态并将该状态作为道具传递给每个子组件。
我建议您看看全球商店，例如 Redux。这可以帮助你。否则，如果要使用本地状态，则必须将更新 CreateEventsBasic 的函数向下传递给子级，并在状态更改时调用它。与其拥有一个数组，不如使用一个对象来代替
@szczocik 我不太擅长英语，但它应该是一个对象数组。据我所知，您不能直接在 useState 中传递对象。但无论如何，谢谢，我会朝这个方向看
您也可以使用 Context API 来执行此操作。它用于拥有可供任何级别的任何子组件使用的通用数据存储。它易于学习和上手。

标签： javascript reactjs react-native ecmascript-6 react-hooks

【解决方案1】：

您必须将函数传递给子组件，并在子状态更新时调用该函数。可能是这样的。

const CreateEventsBasic = () => {
  const [info, setInfo] = useState({});
  const updateState = (newState, type) => {
    setInfo({...info, [type]: newState })
  }

  return (
    <div className="create-event-basic">
      <BasicInfo updateState={updateState} />
      <Keywords updateState={updateState} />
      <Location updateState={updateState} />
      <Date updateState={updateState} />
      <LinkToTheGroup updateState={updateState} />
    </div>
  );
};

然后在你的子组件中当状态改变时调用它

const BasicInfo = ({ updateState }) => {
  const [state, setState] = useState({});

  useEffect(() => {
     updateState(state, "basicInfo);
  }, [state])

  return (
    <div></div>
  )
}

因此，在使用useEffect 跟踪的子状态更改时，您调用作为道具传递的updateState 函数。这反过来又为您在父组件中的对象添加了一个子状态。

【讨论】：

嗯，它有点工作。但是每次更新状态时，它也会存储此状态的先前版本imgur.com/a/J5HBvZw
这就是为什么我建议使用对象的对象，而不是对象的数组。这样您就可以轻松地将旧状态与新状态交换。让我更新答案以改用对象
谢谢，这正是我所需要的！