React类组件中如何跨组件调用数组并渲染到选择框？

我看了你的代码，问题其实很明确：你在CarList组件里已经把carList数组完整渲染成select选项了，但在App组件里既没正确复用这个组件，又试图去map一个自己state里根本不存在的carList数组，这当然不会有效果。

给你两种解决方案，根据你的实际需求选择：

方案一：直接复用CarList组件（最简单快捷） #

既然CarList组件已经实现了select和选项的完整渲染逻辑，那你只需要在App组件里直接引入使用它就行，不用重复写代码。修改后的App组件代码如下：

import React from "react";
import { Component } from "react";
// 注意：这里的导入路径要和你的实际文件名一致，你写的是Tabela，是不是文件名写错了？应该是CarList.js吧？
import CarList from "./components/CarList";

class App extends Component{
  constructor(props){
    super(props);
    this.state={}
  }

  render(){
    return(
      <div>
        <p>I got it! Here is the car list:</p>
        {/* 直接使用CarList组件，它会自带完整的select和选项 */}
        <CarList />
      </div>
    )
  }
}

export default App;

⚠️ 小提醒：你当前导入的路径是./components/Tabela，但组件类名叫CarList，大概率是文件名写错了，要确保导入路径和实际文件名完全匹配，否则会找不到组件。

方案二：将状态提升到App组件（更灵活的自定义方式） #

如果你需要在App组件里自己控制select的渲染逻辑（比如加额外样式、修改选项格式等），那最好把carList数组放到App的state里统一管理，这样既可以在App里直接渲染，也能通过props传递给CarList组件复用。

修改后的App组件：

import React from "react";
import { Component } from "react";
import CarList from "./components/CarList";

class App extends Component{
  constructor(props){
    super(props);
    // 把carList数组移到App的state中统一管理
    this.state={
      carList: ['Jeep', 'Kwid','HB20','Ônix', 'Prisma', 'Gol quadrado']
    }
  }

  render(){
    return(
      <div>
        <p>I got it! Here is the car list:</p>
        <select>
          {/* 现在map的是App自己state里的有效数组，就能正常渲染选项了 */}
          {this.state.carList.map( (item,x)=>{
            return(
              <option key={x}>{item}</option>
            )
          })}
        </select>
        {/* 如果CarList组件也需要用这套数据，可以通过props传递过去 */}
        {/* <CarList carList={this.state.carList} /> */}
      </div>
    )
  }
}

export default App;

如果用这个方案，你也可以同步修改CarList组件，让它通过props接收数据而不是自己存state，这样更符合React的状态管理思路：

import React,{Component} from "react";

class CarList extends Component{
  render(){
    // 从props中接收父组件传递的carList
    const { carList } = this.props;
    return(
      <div>
        <select>
            {carList.map( (item,ii)=>{
                return(
                    <option key={ii}>{item}</option>
                )
            } )}
        </select>
      </div>
    );
  }
}

export default CarList;

这样做的好处是数据由父组件统一管控，多个子组件可以共享同一套数据，后续修改也更方便。

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