React中useContext状态设置求助：通过useEffect更新媒体上下文

核心问题分析 #

你的代码大概率是直接用新值替换了mediaContent对象，导致原有媒体属性（图片、海报等）被覆盖，另外useEffect的依赖配置可能也存在问题，导致更新不触发或重复触发。

解决方案步骤 #

1. 使用函数式更新合并对象
   调用setMediaContent时，必须基于当前状态进行合并，而非直接替换，这样才能保留原有媒体数据：

   setMediaContent(prevState => ({
     ...prevState,
     video: video
   }));
   

   这个写法会把新的video属性合并到现有的mediaContent对象里，不会丢失之前的图片、海报等属性。

2. 配置正确的useEffect依赖项
   确保useEffect监听video和setMediaContent的变化，同时添加判断避免无效更新：

   useEffect(() => {
     // 仅当video存在时才更新
     if (video) {
       setMediaContent(prevState => ({
         ...prevState,
         video: video
       }));
     }
   }, [video, setMediaContent]);
   

3. 初始化完整的媒体对象结构
   在创建context状态时，提前初始化所有可能的媒体类型，避免后续访问属性时出现undefined：

   const [mediaContent, setMediaContent] = useState({
     video: null,
     image: null,
     poster: null
     // 根据需求添加其他媒体类型
   });
   

效果验证 #

修改后，每次video变量更新时，都会将其合并到现有的mediaContent对象中，原有图片、海报等数据得以保留，最终实现包含多种媒体类型的上下文状态。

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