React类组件中如何通过props传递数组数据至另一组件

React类组件遵循单向数据流，子组件无法直接修改父组件状态，需要通过父组件传递回调函数的方式，让子组件调用该函数将数据回传给父组件。以下是具体实现步骤和代码示例，同时解决你遇到的this.state相关报错：

1. 父组件（App）配置：接收子组件数据 #

在App组件中定义状态存储子组件传来的车辆列表，同时创建回调函数用于接收数据，并将该函数通过props传给CarList：

import React, { Component } from 'react';
import CarList from './CarList';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      carList: [] // 存储从CarList获取的车辆数据
    };
    // 绑定回调函数的this指向，避免this.state为null/undefined
    this.handleCarListUpdate = this.handleCarListUpdate.bind(this);
  }

  // 回调函数：接收子组件传来的carList并更新自身状态
  handleCarListUpdate(carList) {
    this.setState({ carList });
  }

  render() {
    const { carList } = this.state;
    return (
      <div>
        <select>
          {/* 用子组件传来的数据渲染option */}
          {carList.map(car => (
            <option key={car.id} value={car.id}>
              {car.name}
            </option>
          ))}
        </select>
        {/* 将回调函数通过props传递给CarList */}
        <CarList onCarListUpdate={this.handleCarListUpdate} />
      </div>
    );
  }
}

export default App;

2. 子组件（CarList）配置：传递数据给父组件 #

在CarList组件中，当自身state的carList发生变化时（比如组件初始化、用户操作更新列表），调用父组件传来的回调函数，将最新的carList传递回去：

import React, { Component } from 'react';

class CarList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 示例车辆数据，实际可能从接口获取
      carList: [
        { id: 1, name: '丰田凯美瑞' },
        { id: 2, name: '本田雅阁' },
        { id: 3, name: '大众迈腾' }
      ]
    };
  }

  componentDidMount() {
    // 组件挂载完成后，将初始数据传给父组件
    // 如果是接口请求数据，可在请求完成后更新state再调用回调
    this.props.onCarListUpdate(this.state.carList);
  }

  // 示例：更新车辆列表后，同步传递给父组件
  addNewCar = () => {
    const newCar = { id: 4, name: '特斯拉Model 3' };
    this.setState(
      prevState => ({ carList: [...prevState.carList, newCar] }),
      // state更新完成后调用回调，确保传递最新数据
      () => this.props.onCarListUpdate(this.state.carList)
    );
  };

  render() {
    return (
      <div>
        <button onClick={this.addNewCar}>添加车辆</button>
      </div>
    );
  }
}

export default CarList;

关键注意事项（解决this.state报错） #

• this绑定：父组件的回调函数必须绑定this（构造器bind或用箭头函数定义），否则函数内的this会指向undefined，导致this.state报错。
• 状态更新时机：调用父组件回调时，要确保子组件的carList已经更新完成——setState的第二个参数是状态更新后的回调，在这里调用父组件的方法能保证传递的是最新数据。
• 避免直接修改state：更新子组件的carList时，要通过setState修改，不能直接操作this.state.carList，否则React无法检测状态变化，父组件也无法收到更新后的数据。

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