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

Question

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

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

Answer 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跟踪的子状态的更改时，您可以调用作为prop传递的updateState函数。这反过来又会将子状态添加到父组件中的对象中。