React中useState存储对象每次重渲染重置，存字符串正常是什么原因？

你的问题是代码逻辑编写错误导致的，和React存储对象类型state的特性无关。

具体错误点 #

• 状态更新逻辑直接写在组件顶层，不属于渲染输出的逻辑不应该直接放在顶层执行，应该放到useEffect副作用钩子或者事件回调中，否则每次组件渲染都会执行判断逻辑，可能引发不必要的重渲染甚至无限循环。
• 初始化stateDict时color属性赋值的green如果是字符串值，你没有加引号包裹，会被识别为未定义的变量，抛出引用错误打断状态更新流程，导致对象状态更新失败，看起来就像一直停留在初始值。
• 访问状态属性的方式错误，你没有单独声明number变量，要获取对象state中的number字段，必须通过stateDict.number访问，直接写number会读取外部作用域的变量，要么报错要么拿到错误值，导致你误判状态更新结果。
• 函数式组件没有返回合法的JSX元素，会导致React渲染报错，打断正常的状态更新流程。
• 更新对象状态时如果要依赖上一次的状态值，建议使用函数式更新写法，避免闭包捕获旧状态导致的更新错误。

修复后代码示例 #

const MyComponent = (props) => {
  const [name, setName] = useState('Bob')
  const [stateDict, setStateDict] = useState({
    number: 1, 
    color: 'green', // 字符串值加引号包裹
    somethingElse: undefined,
    aFourthThing: {}
  })

  // 正确访问对象状态的属性
  console.log(`${name}, ${stateDict.number}`)

  // 状态更新逻辑放到useEffect中，仅在组件挂载时执行一次
  useEffect(() => {
    if (name === "Bob") { 
      setName("Fred") 
    }
  
    if (stateDict.number === 1) { 
      // 函数式更新，保证拿到最新的前序状态
      setStateDict(prevState => ({
       ...prevState,  
        number: 2
      }))
    }
  }, [])

  // 组件必须返回合法的JSX元素
  return <div></div>
}

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