两次渲染同组件传不同Ajax结果props，第二个组件数据为空求助

嘿，我来帮你搞定这个问题！这种同一个组件渲染两次但只有一个能拿到数据的情况，大概率是React组件复用的坑，咱们一步步来排查：

1. 优先检查：给两个ComponentB加唯一key属性 #

React在渲染多个相同组件时，需要通过key来区分不同实例——如果没有唯一key，React会默认复用第一个ComponentB的DOM和状态，哪怕你更新了第二个的props，它也不会触发重新渲染。

修改你的render方法，给每个ComponentB加独一无二的key：

render() {
  const { list1, list2 } = this.state;
  return (
    <div>
      <ComponentB data={list1} key="component-b-list1" />
      <ComponentB data={list2} key="component-b-list2" />
    </div>
  );
}

2. 优化请求与状态更新逻辑 #

嵌套的GET请求写法容易出现状态更新顺序问题，而且效率偏低，建议改成并行请求+一次性更新状态：

componentDidMount() {
  // 用Promise.all同时发起两个请求，比嵌套更高效
  Promise.all([
    fetch('/api/list1').then(res => res.json()),
    fetch('/api/list2').then(res => res.json())
  ])
  .then(([list1Data, list2Data]) => {
    // 一次性更新两个状态，避免多次setState导致的渲染混乱
    this.setState({
      list1: list1Data,
      list2: list2Data
    });
  })
  .catch(err => {
    console.error('请求失败:', err);
  });
}

3. 验证ComponentB的props接收逻辑 #

确认ComponentB里正确使用了传入的data：

• 如果是类组件，确保用this.props.data而不是其他变量；
• 如果是函数组件，直接用props.data；
• 如果ComponentB是PureComponent，要保证传入的data是新引用（比如不要直接修改原数组，而是返回新数组），否则浅比较会认为props没变化，不会重新渲染。

举个正确更新数组的例子：

// 错误：直接修改原数组，引用不变
this.state.list2.push(newItem);
this.setState({ list2: this.state.list2 });

// 正确：返回新数组，更新引用
this.setState(prevState => ({
  list2: [...prevState.list2, newItem]
}));

总结 #

先试试给组件加key，这是最常见的原因。如果问题还没解决，再依次排查请求逻辑和ComponentB的props处理，应该就能搞定啦！

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