在 useState 挂钩中同步 object 中的嵌套数组

Question

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,
  });

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

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

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]);

Answer 1

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]);