Синхронизация вложенного массива внутри объекта в хуке useState

Question

Я определил объект useState следующим образом:

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

Я завершил заполнение вложенного массива groupDetails , но когда я это сделаю:

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

Поле «detailsOfPeople», содержащее этот массив groupDetails , ничего не показывает. Но если я напечатаю «groupDetails», будут показаны все значения. В функции useEffect я делаю это:

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

Answer 1

Перехватчики React State работают асинхронно c, поэтому вам не следует ждать изменения состояния после вызова setState. Вы можете поймать конец изменения состояния с помощью useEffect.

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