React中Dropdown列表选中项无法即时更新问题求助

我通过两个Dropdown组件实现业务需求：先从接口获取数据并为每个设备添加BLEDevice和Camera字段，再渲染成Dropdown。选择选项时，日志显示数据已变更，但组件上的选中值有时无法即时更新，该如何解决？

const Dashboard = () => {
    async function getDashboard() {
        try {
            const res = await axios.get(BASE_URL + "dashboard");
            const newDevices = res?.data?.devices?.map((device) => ({
                ...device,
                BLEDevice: userModifiedSettings[device.connectionId]?.BLEDevice || "Off",
                Camera: userModifiedSettings[device.connectionId]?.Camera || "Back", // Default to "Back"
            }));
            setDashboardData(newDevices);
            setDashboardLoading(false);
        } catch (err) {
            console.error("Error fetching dashboard:", err);
            setDashboardLoading(false);
        }
    }

    useEffect(() => {
        getDashboard();
    }, []);

    const toggleDropdown = (connectionId, field) => {
        setDropdownOpen((prevState) => ({
            ...prevState,
            [`${connectionId}-${field}`]: !prevState[`${connectionId}-${field}`],
        }));
    };

    const handleDeviceUpdate = (updatedDevice) => {
        setDashboardData((prevState) =>
            prevState.map((device) =>
                device.connectionId === updatedDevice.connectionId
                    ? { ...device, ...updatedDevice }
                    : device
            )
        );
        setUserModifiedSettings((prevState) => ({
            ...prevState,
            [updatedDevice.connectionId]: {
                BLEDevice: updatedDevice.BLEDevice,
                Camera: updatedDevice.Camera,
            },
        }));
    };

    const handleSelect = (connectionId, field, value) => {
        const updatedDevice = dashboardData.find((device) => device.connectionId === connectionId);
        updatedDevice[field] = value;
        handleDeviceUpdate({ ...updatedDevice, [field]: value });
    };

    return (
        {dashboardData.map((device) => (
            <Col key={device.connectionId} sm="6" md="4" lg="3">
                <Card
                    className="mb-4 border rounded"
                    style={{ borderColor: "#6c757d", borderWidth: "2px", padding: "10px" }}
                >
                    <CardBody>
                        <CardTitle tag="h5">{device.deviceName}</CardTitle>
                        <CardSubtitle className="mb-2 text-muted">
                            Profile:{" "}
                            {device.data ? (
                                <FaCheckCircle color="green" />
                            ) : (
                                <FaTimesCircle color="red" />
                            )}
                        </CardSubtitle>
                        <CardText>
                            <strong>Camera:</strong>
                            <Dropdown
                                isOpen={dropdownOpen[`${device.connectionId}-Camera`]}
                                toggle={() => toggleDropdown(device.connectionId, "Camera")}
                                className="d-inline-block ml-2"
                            >
                                <DropdownToggle caret color="">
                                    <FaCaretDown /> {device.Camera}
                                </DropdownToggle>
                                <DropdownMenu>
                                    <DropdownItem
                                        onClick={() =>
                                            handleSelect(device.connectionId, "Camera", "Back")
                                        }
                                    >
                                        Back
                                    </DropdownItem>
                                    <DropdownItem
                                        onClick={() =>
                                            handleSelect(device.connectionId, "Camera", "Front")
                                        }
                                    >
                                        Front
                                    </DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                            <br />
                            <strong>BLE Device:</strong>
                            <Dropdown
                                isOpen={dropdownOpen[`${device.connectionId}-BLEDevice`]}
                                toggle={() => toggleDropdown(device.connectionId, "BLEDevice")}
                                className="d-inline-block ml-2"
                            >
                                <DropdownToggle caret color="">
                                    <FaCaretDown /> {device.BLEDevice}
                                </DropdownToggle>
                                <DropdownMenu>
                                    <DropdownItem
                                        onClick={() =>
                                            handleSelect(device.connectionId, "BLEDevice", "On")
                                        }
                                    >
                                        On
                                    </DropdownItem>
                                    <DropdownItem
                                        onClick={() =>
                                            handleSelect(device.connectionId, "BLEDevice", "Off")
                                        }
                                    >
                                        Off
                                    </DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </CardText>
                    </CardBody>
                </Card>
            </Col>
        ))}
    );
};
export default withRouter(Dashboard);

问题原因 #

核心问题在于直接修改了React状态对象：
在handleSelect函数中，updatedDevice[field] = value;这行代码直接修改了从dashboardData状态中取出的对象，违反了React的不可变更新原则。React依赖状态引用的变化来触发组件重渲染，直接修改原对象不会改变引用，导致组件无法感知到状态变化，进而UI不刷新。

解决方案 #

1. 修复handleSelect函数，避免直接修改原状态 #

去掉直接修改状态对象的代码，基于找到的设备创建全新的更新对象：

const handleSelect = (connectionId, field, value) => {
    const targetDevice = dashboardData.find((device) => device.connectionId === connectionId);
    // 直接创建新对象，不修改原状态
    const updatedDevice = {
        ...targetDevice,
        [field]: value
    };
    handleDeviceUpdate(updatedDevice);
};

2. 确保状态更新完全遵循不可变性 #

当前handleDeviceUpdate中的状态更新逻辑是正确的，它通过map创建新数组，通过展开运算符创建新对象，保持了状态的不可变性，无需修改，但可以确认该逻辑的正确性：

const handleDeviceUpdate = (updatedDevice) => {
    setDashboardData((prevState) =>
        prevState.map((device) =>
            device.connectionId === updatedDevice.connectionId
                ? { ...device, ...updatedDevice } // 创建新对象替换旧对象
                : device
        )
    );
    setUserModifiedSettings((prevState) => ({
        ...prevState,
        [updatedDevice.connectionId]: {
            BLEDevice: updatedDevice.BLEDevice,
            Camera: updatedDevice.Camera,
        },
    }));
};

3. 补充缺失的初始状态定义（如果未定义） #

确保所有状态都有正确的初始值，避免潜在的引用问题：

const [dashboardData, setDashboardData] = useState([]);
const [userModifiedSettings, setUserModifiedSettings] = useState({});
const [dropdownOpen, setDropdownOpen] = useState({});
const [dashboardLoading, setDashboardLoading] = useState(true);

4. 关闭Dropdown（可选优化） #

选择选项后自动关闭Dropdown，提升用户体验，在handleSelect中添加关闭逻辑：

const handleSelect = (connectionId, field, value) => {
    const targetDevice = dashboardData.find((device) => device.connectionId === connectionId);
    const updatedDevice = {
        ...targetDevice,
        [field]: value
    };
    handleDeviceUpdate(updatedDevice);
    // 关闭当前Dropdown
    setDropdownOpen(prev => ({...prev, [`${connectionId}-${field}`]: false}));
};

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