如何解决useEffect获取数据传入Player子组件时为null的问题？

问题描述 #

App组件通过useEffect获取urlList后传递给Player组件，仅打印props.songs日志正常，但用于音频播放时触发报错：无法读取null（songs）的属性，尝试过条件渲染Player组件但无效。

代码示例 #

App.js #

useEffect( () => {
  setUrlList(() => {
    if (!email) return;
    console.log("triggering use effect!")
    async function fetchUrlList(){
      // api code here but is too long to write.
    }
    setUrlList(result) // this works fine!
    console.log(urlList) // this logs it fine!
    return urlList
  }
  fetchUrlList()
  return
}) },[email]);

// 渲染Player组件时抛出错误
<Player
  currentSongIndex={currentSongIndex}
  setCurrentSongIndex={setCurrentSongIndex}
  nextSongIndex={nextSongIndex}
  songs={urlList}
/>

Player.js #

function Player(props) {          
  return(
    <audio
      src={props.songs[props.currentSongIndex].src} // 错误：无法读取null（songs）的属性
      ref={audioElement}
    ></audio>
  )
}
export default Player;

错误原因分析 #

1. useEffect写法错误：代码错误嵌套了setUrlList(() => { ... })，导致状态更新逻辑混乱；且console.log(urlList)因React状态更新的异步性，打印的是旧值，并非实际更新后的urlList。
2. 初始状态与异步加载冲突：urlList初始值可能为null/undefined，而useEffect是异步执行的，Player组件会先以初始状态渲染，直接访问props.songs[...].src必然报错。
3. 条件渲染逻辑不完整：之前的条件渲染可能仅判断了urlList存在，未校验其长度或currentSongIndex的有效性。

解决方案 #

1. 修正App组件的useEffect逻辑 #

移除错误的setUrlList回调嵌套，正确处理异步请求：

useEffect(() => {
  if (!email) return;
  console.log("triggering use effect!");
  
  async function fetchUrlList() {
    // 这里编写你的API请求代码
    // 示例：
    // const res = await fetch(`your-api-url?email=${email}`);
    // const result = await res.json();
    setUrlList(result);
  }
  
  fetchUrlList();
}, [email]);

2. 给urlList设置初始空数组 #

在App组件初始化urlList时设为空数组，避免初始状态为null：

const [urlList, setUrlList] = useState([]);

3. 完善条件渲染与Player组件的防御性访问 #

方法一：在App组件中条件渲染Player

只有当urlList有数据时才渲染Player：

{urlList.length > 0 ? (
  <Player
    currentSongIndex={currentSongIndex}
    setCurrentSongIndex={setCurrentSongIndex}
    nextSongIndex={nextSongIndex}
    songs={urlList}
  />
) : (
  <div>音频列表加载中...</div>
)}

方法二：在Player组件中做防御性处理

使用可选链操作符或条件判断避免直接访问不存在的属性：

function Player(props) {
  const { songs, currentSongIndex } = props;
  // 校验songs存在且currentSongIndex在有效范围内
  const currentSong = songs?.[currentSongIndex];
  
  return currentSong ? (
    <audio
      src={currentSong.src}
      ref={audioElement}
    ></audio>
  ) : null;
}

export default Player;

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