使用useSelector获取的数据作为useState默认值时为空的问题求助

这是React结合Redux开发时非常常见的初始化时机问题，我来帮你理清原因并给出落地的解决办法：

为什么会出现这个矛盾？ #

useState的初始值只在组件首次渲染时被读取一次，之后组件重新渲染时，这个初始值不会再被更新。而你的Redux状态settings.info大概率是异步加载的——当组件第一次渲染时，Redux里的settings.info还没被填充数据，所以settings.info.fulfilmentAutoma是空的，这时候getValue就被初始化为空了；等Redux数据加载完成后，组件重新渲染，useSelector拿到了最新的settings，所以console.log能输出正确值，但useState不会再更新初始值，因此getValue还是保持第一次的空状态。

解决办法 #

1. 用useEffect监听Redux状态变化更新本地state

如果确实需要把这个值存在本地state（比如要做独立于Redux的本地修改），可以通过useEffect监听目标值的变化，一旦有值就更新getValue：

const settings = useSelector((state) => state.getsettings);
const [getValue, setValue] = useState();

// 当目标值变化时同步更新本地state
useEffect(() => {
  // 用可选链避免settings.info为undefined时触发报错
  if (settings.info?.fulfilmentAutoma) {
    setValue(settings.info.fulfilmentAutoma);
  }
}, [settings.info?.fulfilmentAutoma]); // 依赖项设为目标值，确保变化时触发

2. 直接使用Redux状态，不维护本地state

如果不需要对这个值做本地修改，完全可以直接使用settings.info?.fulfilmentAutoma，没必要多维护一个本地state，这样既简洁又不会出现同步问题：

const settings = useSelector((state) => state.getsettings);

// 后续直接用 settings.info?.fulfilmentAutoma 代替 getValue 即可

3. 确保数据加载完成后再初始化组件

如果你的组件必须依赖这个Redux数据才能正常渲染，可以先判断数据是否加载完成，等数据就绪后再初始化useState：

const settings = useSelector((state) => state.getsettings);

// 先判断数据是否加载完成，未完成时显示加载状态
if (!settings.info) {
  return <div>加载中...</div>;
}

// 此时settings.info已存在，初始化useState就能拿到正确值
const [getValue, setValue] = useState(settings.info.fulfilmentAutoma);

// 后续组件渲染逻辑

额外提示 #

记得在访问嵌套属性时使用可选链操作符?.，比如settings.info?.fulfilmentAutoma，避免在settings.info还未初始化时出现Cannot read properties of undefined的报错。

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