如何从父组件为子组件的useState设置动态值？

你的问题根源在于直接在组件渲染流程中调用状态更新函数会触发无限重渲染循环，同时子组件本地状态未跟随父组件props自动同步。使用useEffect监听props变化是最直接的解决方式：

修正后的子组件代码 #

const Child = ({ firstValue }) => {
  // 用父组件传入的初始值初始化本地状态
  const [secondValue, setSecondValue] = useState(firstValue);

  // 监听firstValue变化，同步更新本地状态
  useEffect(() => {
    setSecondValue(firstValue);
  }, [firstValue]); // 仅当firstValue改变时执行同步逻辑

  // 这里可以正常使用secondValue
  return <div>{secondValue}</div>;
};

问题原因分析 #

• 直接在组件顶层调用setSecondValue(firstValue)：组件每次渲染都会执行该代码，状态更新会触发组件重新渲染，进而再次执行更新逻辑，形成无限循环。
• 错误的useState初始化写法：useState(...secondValue, {value: firstValue})不符合useState的语法规则，useState仅接收初始值作为参数，这种写法无法实现状态同步，自然无效。

额外说明 #

• 依赖数组[firstValue]是关键：它确保只有当父组件传入的firstValue发生变化时，才会执行同步操作，避免不必要的组件更新。
• 该方案支持子组件本地状态独立修改：如果后续需要通过子组件自身的操作改变secondValue，父组件的props更新只会同步最新的firstValue，不会覆盖子组件的本地修改。

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