React函数组件中嵌套state变量未同步更新，原因及正确用法？

问题原因 #

• React中useState的初始化逻辑仅在组件首次渲染时执行一次，后续渲染不会重新计算初始值。你初始化rooms时引用了noOfPersonsForRoom等子state的初始值，但这些子state更新后，rooms并不会自动同步——因为它只是首次渲染时的快照，没有被重新赋值。
• React的各个state是独立维护的，框架不会自动处理不同state之间的依赖同步，这种关联更新需要你手动实现。

解决方案 #

方案1：合并关联State（推荐）

把房间相关的所有状态合并到一个rooms对象中，用它作为唯一数据源，更新时直接修改对应字段，从根源避免不同步问题。

const [rooms, setRooms] = useState([
    {
        roomNo: 1,
        noOfPersons: 2,
        ageOfPerson1: 0,
        ageOfPerson2: 0
    },
]);

const changeNoOfPersonsForRoom = (e, index) => {
    // 复制原数组避免直接修改state
    const updatedRooms = [...rooms];
    updatedRooms[index].noOfPersons = e.target.value;
    setRooms(updatedRooms);
};

方案2：用useEffect监听子State变化

如果必须分开维护多个state，可以通过useEffect监听子state的变化，一旦它们更新就重新计算并更新rooms。

import { useState, useEffect } from 'react';

const [noOfPersonsForRoom, setNoOfPersonsForRoom] = useState([2]);
const [ageOfPerson1ForRoom, setAgeOfPerson1ForRoom] = useState([0]);
const [ageOfPerson2ForRoom, setAgeOfPerson2ForRoom] = useState([0]);
const [rooms, setRooms] = useState([]);

// 监听子state变化，同步更新rooms
useEffect(() => {
    setRooms([
        {
            roomNo: 1,
            noOfPersons: noOfPersonsForRoom[0], 
            ageOfPerson1: ageOfPerson1ForRoom[0],
            ageOfPerson2: ageOfPerson2ForRoom[0]
        },
    ]);
}, [noOfPersonsForRoom, ageOfPerson1ForRoom, ageOfPerson2ForRoom]);

const changeNoOfPersonsForRoom = (e, index) => {
    setNoOfPersonsForRoom([
        ...noOfPersonsForRoom.slice(0, index),
        e.target.value,
        ...noOfPersonsForRoom.slice(index + 1),
    ]);
};

方案3：更新子State时手动同步rooms

在修改子state的函数中，同时更新rooms的值，确保两者状态一致。

const changeNoOfPersonsForRoom = (e, index) => {
    const newNoOfPersons = [
        ...noOfPersonsForRoom.slice(0, index),
        e.target.value,
        ...noOfPersonsForRoom.slice(index + 1),
    ];
    // 更新子state
    setNoOfPersonsForRoom(newNoOfPersons);
    // 同步更新rooms
    setRooms([
        {
            roomNo: 1,
            noOfPersons: newNoOfPersons[0], 
            ageOfPerson1: ageOfPerson1ForRoom[0],
            ageOfPerson2: ageOfPerson2ForRoom[0]
        },
    ]);
};

内容的提问来源于stack exchange，提问作者night_thinker