React函数组件使用useEffect更新interface类型props后UI不生效问题

问题根因 #

• 核心错误是useEffect中setChannelDetails的更新逻辑存在歧义：你使用函数式更新时，回调的入参实际是本地旧的channelDetails状态值，你此处错误把参数命名为channelInfo，误以为是props传入的新值，直接返回该参数等于未对state做任何修改，因此本地状态永远不会同步props的变化。
• 额外可能的诱因：父组件传递channelInfo时如果是直接修改原对象属性而非返回新的对象引用，React会认为props没有变化，不会触发重渲染和useEffect执行。

修复方案 #

1. 修正useEffect中的更新逻辑 #

直接用props传入的新channelInfo更新本地state即可：

useEffect(() => {
  setShowAltText(!channel?.image?.url);
  setChannelDetails(channelInfo);
}, [channel, channelInfo]);

2. 可选优化：移除不必要的本地state #

如果channelDetails没有专属的本地修改逻辑，完全不需要把props存到本地state，直接用props.channelInfo渲染UI即可，省掉手动同步的步骤，从根源避免这类同步bug。

3. 检查父组件的更新逻辑 #

确保父组件修改channelInfo时是返回全新的对象，而不是直接修改原对象的属性，否则React检测不到数据变化：

// 错误写法：直接修改原对象，引用不变，React检测不到更新
oldChannelInfo.likeCount = 100;
setChannelInfo(oldChannelInfo);

// 正确写法：返回新对象，触发React更新
setChannelInfo({
  ...oldChannelInfo,
  likeCount: 100
})

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