React多层组件树中渲染后访问Props的问题

嘿，我来帮你搞定这个props undefined的问题～ 先帮你理清问题出在哪，再给你几个实用的解决方案。

问题根源 #

你现在的逻辑里，axios.get是异步请求——组件先挂载（执行render），然后才会在componentDidMount里发请求拿数据。这就导致：

1. 第一次渲染时，state.entities还是初始的空数组[]，会被传递给<Component>；
2. <Component>的componentWillMount在它第一次渲染前执行，这时候拿到的this.props.entities也是空数组，存到state里传给子组件；
3. 子/孙组件拿到空数组后，直接去访问entities.id，自然会报undefined（因为数组没有id属性，就算是对象，初始也是空的）。

另外要提一句：componentWillMount现在已经被React标记为不安全的生命周期钩子了，官方不建议再使用，而且它也解决不了异步数据的问题。

解决方案 #

1. 不要把Props复制到State（关键！）

你的<Component>完全没必要把props.entities存到自己的state里——props更新时组件会自动重新渲染，存到state反而会导致数据不同步（比如父组件的entities更新了，子组件的state不会自动跟着变）。直接用props传递就行：

// Component.jsx 优化后
render() {
  return (
    <div>
      <ChildComponent entities={this.props.entities} />
    </div>
  );
}

2. 条件渲染 + 可选链操作符

在子/孙组件里，先判断数据是否存在，再去访问属性：

• 如果你拿到的entities是单个对象：用可选链?.（ES2020+支持），或者短路判断&&

// ChildComponent.jsx
render() {
  const { entities } = this.props;
  return (
    <div>
      {/* 可选链写法 */}
      {entities?.id}
      {/* 或者短路判断 */}
      {entities && entities.id}
    </div>
  );
}

• 如果entities是数组：先判断数组长度，再遍历

// ChildComponent.jsx
render() {
  const { entities } = this.props;
  return (
    <div>
      {entities.length > 0 ? (
        entities.map(item => <div key={item.id}>{item.id}</div>)
      ) : (
        <div>暂无数据</div>
      )}
    </div>
  );
}

3. 全局加载状态（提升体验）

在app.jsx里加个加载状态，等数据请求完成后再渲染子组件，避免子组件拿到空数据：

// app.jsx 优化后
constructor(props) {
  super(props);
  this.state = {
    entities: [],
    loading: true // 新增加载状态
  }
}

componentDidMount() {
  axios.get(`api.com`)
    .then(response => {
      // 注意：axios返回的response里，真正的接口数据在response.data里！
      this.setState({
        entities: response.data,
        loading: false
      })
    })
    .catch(err => {
      console.error('请求出错啦：', err);
      this.setState({ loading: false });
    });
}

render() {
  const { loading, entities } = this.state;
  
  // 加载中时显示提示
  if (loading) {
    return <div>数据加载中...</div>;
  }

  return (
    <div>
      <Component entities={entities} />
    </div>
  );
}

额外提醒 #

• 注意axios的返回结构：别直接把response赋值给entities，通常接口返回的数据在response.data里；
• 尽量用函数组件+Hook（比如useEffect）替代类组件的生命周期，现在React官方更推荐函数组件的写法；
• 如果必须把props存到state，要在componentDidUpdate里监听props变化，更新state，不然会出现数据不同步的问题。

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