为何useState无法设置状态？传入复杂对象时的问题

你的代码里useState(initialValue)针对复杂对象"失效"的核心原因有两个：

1. useState初始值的特性 #

useState的参数仅在组件首次渲染时作为初始值生效，后续即使initialValue（props）发生变化，value状态也不会自动同步——因为useState并不监听props的变更。

比如父组件每次渲染时生成新的复杂对象（如initialValue={{ key: Date.now() }}），子组件的value依然停留在首次渲染时的初始值，不会更新。

2. useEffect的闭包陷阱 #

你空依赖数组的useEffect只会在组件挂载时执行一次，它内部捕获的value是首次渲染时的状态值，后续即使value更新（比如调用setValue），这个闭包里的value也不会改变。

针对复杂对象的修复方案 #

方案一：同步props变化到state #

如果需要在initialValue更新时同步更新value，可以用useEffect监听initialValue，并在其变化时调用setValue。注意因为是复杂对象，需要做深比较避免不必要的更新：

import { useState, useEffect } from 'react';
import { isEqual } from 'lodash'; // 或者自己实现深比较逻辑

const CustomComponent = ({ initialValue }) => {
    const [value, setValue] = useState(initialValue);

    // 监听initialValue的深变化，同步到state
    useEffect(() => {
        if (!isEqual(value, initialValue)) {
            setValue(initialValue);
        }
    }, [initialValue, value]);

    useEffect(() => {
        console.log('当前value:', value);
    }, [value]); // 依赖value，每次value变化都执行

    // return JSX
};

如果不想引入lodash，可以自己实现简单的深比较（比如用JSON.stringify，但注意无法处理函数、Symbol等特殊类型）：

useEffect(() => {
    if (JSON.stringify(value) !== JSON.stringify(initialValue)) {
        setValue(initialValue);
    }
}, [initialValue, value]);

方案二：确保initialValue的引用稳定 #

如果只需要组件首次渲染时用initialValue初始化state，那么要保证父组件传递的initialValue引用稳定，避免父组件每次渲染生成新对象导致子组件不必要的渲染。可以在父组件用useMemo缓存复杂对象：

// 父组件中
const stableInitialValue = useMemo(() => {
    return { /* 复杂对象内容 */ };
}, []); // 依赖数组为空，仅初始化一次

<CustomComponent initialValue={stableInitialValue} />

方案三：直接使用props（无需state） #

如果不需要修改value，只是展示或基于initialValue做计算，完全可以直接使用initialValue，不需要将其存入state：

const CustomComponent = ({ initialValue }) => {
    useEffect(() => {
        console.log('当前initialValue:', initialValue);
    }, [initialValue]); // 监听initialValue变化

    // 直接用initialValue渲染
    return <div>{JSON.stringify(initialValue)}</div>;
};

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