在useState钩子中同步对象内的嵌套数组 [英] Synchronizing nested array within an object in useState hook

问题描述

我已经定义了一个useState对象，如下所示:

I have defined a useState object as follow:

const [groupDetails, setGroupDetails] = React.useState([
    { fullName: "", phoneNo: "", gender: "" },
  ]);
  const [state, setState] = React.useState({
    fullName: "",
    phoneNo: " ",
    email: "",
    gender: "",
    idProof: "",
    noOfPeople: "",
    bookingId: "",
    detailsOfPeople: groupDetails,
  });

我已经完成了嵌套数组 groupDetails 的填充，但是当我这样做时:

I have done populating the nested array groupDetails, but when I do:

console.log("state object:",state);

保存该数组 groupDetails 的字段"detailsOfPeople"不显示任何内容.但是，如果我打印"groupDetails"，则显示所有值. 在useEffect函数中，我正在这样做:

The field "detailsOfPeople" that holds that array groupDetails shows nothing. But if I print "groupDetails" all values are shown. Within useEffect function I'm doing this:

useEffect(() => {
    setGroupDetails(groupDetails);
    setState(state);
  }, [state, groupDetails]);

推荐答案

反应状态挂钩正在异步工作，因此您不应在setState调用之后等待状态更改.您可以通过useEffect捕获状态更改的结束.

React State hooks are working async so you shouldn't wait state change after the setState call. You can catch the end of state change via useEffect.

useEffect(() => {
    setGroupDetails(groupDetails);
    setState(prevState => ({...prevState, detailsOfPeople: groupDetails}) );
}, [groupDetails]);

这篇关于在useState钩子中同步对象内的嵌套数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！