React Native中useState设置视频标题不更新问题求助

你遇到的核心问题是：useState的初始值仅在组件首次挂载时生效。当你通过不同的letter或mode参数再次进入Play页面时，组件会重新渲染，但videoTitel的状态不会自动根据新参数更新——因为初始赋值逻辑只会执行一次。

用useEffect监听route.params中的letter和mode变化，每当这两个参数改变时，重新计算并更新videoTitel状态。

修改后的代码示例：

import { useEffect } from 'react'; // 别忘了导入useEffect

export default function Play ({ navigation, route}) {
  const { Letter: letter, Mode: mode } = route.params; // 解构赋值更简洁

  const video = useRef(null);
  const [selection, setSelection] = useState(0);
  const [videoTitel, setVideoTitel] = useState(''); // 先初始化空值
  const [videoSpeed, setVideoSpeed] = useState(1.0);

  const Videos = require('../components/Videos');

  // 监听letter和mode的变化，更新视频标题
  useEffect(() => {
    const selectedVideo = Videos.Array.find(V => V.name === letter.toString());
    if (selectedVideo) { // 加判断避免找不到视频的情况
      setVideoTitel(selectedVideo.Front[mode]);
      console.log("更新后的VideoTitel: ", selectedVideo.Front[mode]);
    }
  }, [letter, mode]); // 依赖项：当letter或mode变化时触发
}

• useEffect的依赖数组[letter, mode]确保只有当这两个参数发生变化时，才会重新执行内部逻辑更新标题。
• 把videoTitel的初始值设为空字符串，避免首次渲染时可能出现的undefined问题，后续由useEffect完成赋值。
• 增加selectedVideo存在性判断，防止找不到匹配视频时抛出错误。

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