React传入新数组更新useState后组件未重渲染问题排查

你遇到的状态更新不触发重渲染问题，核心是React Hooks闭包陷阱加状态更新写法不严谨导致的：

1. useEffect依赖缺失，捕获的状态为陈旧初始值 #

你的useEffect依赖数组仅声明了[stoppedUser]，未将videoData加入依赖。根据Hooks的执行规则，effect回调中捕获的videoData永远是effect首次执行时绑定的初始值（绝大多数情况是useState声明时传入的初始空数组）。
哪怕后续videoData被更新过，这个effect里拿到的还是最开始的旧值，你用map生成的新数组本质是基于过时的初始状态计算的，和React当前存储的最新state没有实质差异，自然不会触发预期的重渲染。

2. 遍历返回原对象引用存在更新隐患 #

map逻辑中不需要修改的项你直接写了return e，也就是返回原对象的引用。虽然外层是map生成的新数组，父组件本身会触发重渲染，但如果你后续给VideoComponent加了React.memo做性能优化，子组件做props浅比较时会发现对象引用没变化，直接跳过更新，同样会导致视图不刷新。 #

修正状态更新逻辑，从根源规避闭包问题 #

调用setVideoData时使用函数式更新写法，更新函数的入参永远是最新的状态值，不需要把videoData加入effect依赖也能拿到正确值，彻底解决闭包陈旧问题：

useEffect(() => {
  if (stoppedUser.length > 0) {
    setVideoData(prevVideoData => prevVideoData.map((item) => {
      if (stoppedUser.includes(item.id)) {
        // 修改的项返回全新对象，不要保留旧引用
        return { ...item, nodisplay: true, muted: false }
      }
      // 未修改的项也返回拷贝后的新对象，避免后续memo优化踩坑
      return { ...item }
    }))
  }
}, [stoppedUser])

排查子组件更新逻辑 #

如果修正后仍存在视图不更新的问题，检查以下三点：

• 确认更新stoppedUser时传入的是新数组引用：如果是用push等方法修改原数组后直接传入setStoppedUser，数组引用没有变化，useEffect根本不会触发。更新stoppedUser时要生成新数组，比如setStoppedUser([...oldStoppedUser, newUserId])
• 确认VideoComponent没有把传入的nodisplay等props缓存成本地state：如果组件里写了const [nodisplay] = useState(props.nodisplay)这种逻辑，props更新时本地state不会同步，自然不会响应变化。
• 确认key设置正确：你现在用e.id作为key是正确的，不要换成数组索引当key，否则会出现状态复用导致的更新异常。

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