ReactJS中props传对象到子组件返回undefined问题排查

你遇到的undefined报错核心是React初始渲染时机+useEffect依赖配置错误共同导致的：

1. 父组件DetailsView中details的初始值是空数组，第一次页面渲染时，电影详情接口还没返回结果，details.id是undefined，这个值会作为props先传给Cast组件。
2. 子组件Cast里的useEffect依赖数组写的是空数组[]，这个effect只会在组件第一次挂载的时候执行一次，这时候拿到的sid就是初始传进来的undefined，所以拼出来的请求路径是/movie/undefined/credits，直接触发404。
3. 你console.log能看到正确id，是因为父组件接口返回后setDetails触发重渲染，新的id作为props传给了Cast组件，组件重渲染时控制台会打印新值，但空依赖的effect不会重新执行，所以不会再发正确的请求。编辑代码触发热更新时，开发服务器会重新执行组件effect，所以这时候请求能正常发出去，和你观察到的现象完全匹配。

你遇到的报错信息：

xhr.js:220 GET https://api.themoviedb.org/3/movie/undefined/credits?api_key=56fbaac7fd77013cc072d285a17ec005&language=en-US 404

• 第一步：修改Cast组件的useEffect，把传入的id加入依赖数组，同时加判断，只有id是有效值的时候才发接口请求，避免无效请求。
• 第二步（可选优化）：父组件里在详情id没加载完成前，不渲染Cast组件，从源头避免传undefined的情况。

Cast组件修改 #

import React, { useState, useEffect } from "react";
import axios from "axios";

const Cast = (props) => {
  const [cast, setCast] = useState([]);
  const sid = props.id;

  useEffect(() => {
    // 没有id的时候直接返回，不发请求
    if (!sid) return;
    axios
      .get(
        `https://api.themoviedb.org/3/movie/${sid}/credits?api_key=<<api_key>>&language=en-US`
      )
      .then((response) => {
        setCast(response.data.cast);
      });
  // 把sid加入依赖数组，sid变化时重新执行effect
  }, [sid]);

  return (
    <div className="absolute">
      {cast && cast.map((item, index) => <p className="" key={item.id}>{item.name}</p>)}
      <p>{sid}</p>
    </div>
  );
};

export default Cast;

注意：列表渲染最好加唯一key属性，这里用演员的id当key避免控制台警告

父组件可选优化 #

// 父组件DetailsView的return部分修改
return (
  <div className="w-full h-[650px] text-white">
    {/* 其他业务代码 */}
    {/* 只有details.id存在的时候才渲染Cast组件 */}
    {details.id && <Cast id={details.id}/>}
  </div>
);

改完之后刷新页面，就会等父组件拿到正确的电影id之后，Cast组件才会触发带正确id的接口请求，不会再出现undefined的404报错。

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