React函数组件Props变更时未重新渲染问题：子组件接收Props计算值但父组件传新值无更新

咱们来一步步拆解这个问题的根源，以及对应的解决办法：

问题根源 #

你的子组件没有响应父组件传递的新value，主要有两个核心原因：

1. useState初始值仅生效一次：子组件里的const [baseValue, setBaseValue] = useState(value)，只会在组件首次挂载时把传入的value作为baseValue的初始值。后续父组件传递新的value时，这个useState不会自动更新baseValue，因为它的初始化逻辑只执行一次。
2. useEffect依赖错误+无限循环隐患：你的useEffect依赖项是baseValue，而不是父组件传来的value，所以父组件更新value时，这个钩子根本不会触发。另外，你在useEffect里调用setBaseValue(calculate)，而calculate又依赖baseValue，这会导致无限循环——每次baseValue更新，钩子就会重新执行，再次更新baseValue，陷入死循环。

解决方案 #

根据你的业务需求，这里提供两种可行的方案：

方案一：移除不必要的状态（推荐） #

如果你的baseValue只是基于父组件传递的value计算而来，不需要子组件维护独立状态，直接基于props.value计算即可。如果计算逻辑比较耗时，用useMemo缓存计算结果：

function Child({value}){
  // 用useMemo缓存计算结果，避免重复计算
  const baseValue = useMemo(() => {
    return calculate(value);
  }, [value]); // 依赖父组件传递的value，值变化时重新计算

  return (<div>
    <Text>{baseValue}</Text>
  </div>)
}

这种方案逻辑最简洁，也避免了状态维护带来的问题，是优先推荐的写法。

方案二：维护独立状态并监听props变化 #

如果你的业务场景需要子组件独立维护baseValue的状态（比如后续可能在子组件内部修改这个值），那就修改useEffect的依赖项为父组件的value，确保props变化时更新状态：

function Child({value}){
  const [baseValue, setBaseValue] = useState(value);

  // 监听父组件传递的value变化，更新子组件状态
  useEffect(()=>{
    const calculatedValue = calculate(value);
    setBaseValue(calculatedValue);
  },[value]); // 依赖改为props的value，而非baseValue

  return (<div>
    <Text>{baseValue}</Text>
  </div>)
}

这样既保留了子组件的独立状态，又能响应父组件传递的新值，同时也解决了原来的无限循环问题。

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