React类组件报'vehicles'变量未定义错误如何解决

• 构造函数内用let声明的vehicles是构造函数的局部变量，作用域仅局限在constructor代码块内部，类的其他方法、render函数无法访问这个变量。
• 类中定义了名为vehicles的方法，和要存储数据的变量重名，会产生命名冲突。
• 写在vehicles方法里的循环生成数据逻辑从未被调用，就算变量作用域正确，逻辑也不会执行。
• JSX不能直接渲染普通JavaScript对象，就算能拿到vehicles数组，直接把对象数组放到花括号里渲染也会抛错，需要遍历数组把每个数据项转换成合法的JSX节点。

• 类组件中需要跨方法访问、且变化后需要触发重渲染的数据，必须存到this.state上，不要在构造函数里用let/const声明局部变量存储渲染相关数据。
• 把原来重名的vehicles方法改名为generateMockVehicles，避免和状态字段冲突，类方法优先用箭头函数定义，避免this指向错误。
• 在组件挂载完成的生命周期componentDidMount里调用生成模拟数据的方法，拿到数据后通过setState更新到state中，触发组件渲染。
• 渲染时遍历state中的vehicles数组，将每个车辆对象转换成对应的JSX元素，列表渲染记得加唯一key属性。

import React from 'react';
import { ListGroup } from 'react-bootstrap';
// 按你本地安装的faker版本调整导入路径即可
import faker from '@faker-js/faker';

class VehicleList extends React.Component {
  constructor(props){
    super(props);
    // 初始化状态，vehicles作为响应式状态存放在state中
    this.state = {
      vehicles: []
    }
  }

  // 生成模拟车辆数据的方法，箭头函数绑定this指向
  generateMockVehicles = () => {
    const tempList = [];
    for (let i = 0; i < 10; i++) {
      tempList.push({
        id: i,
        manufacturer: faker.vehicle.manufacturer(),
        model: faker.vehicle.model(),
        type: faker.vehicle.type(),
        fuel: faker.vehicle.fuel(),
        vin: faker.vehicle.vin(),
        color: faker.vehicle.color()
      })
    }
    // 更新状态，触发组件重渲染
    this.setState({
      vehicles: tempList
    })
  }

  // 组件挂载完成后执行模拟数据生成
  componentDidMount() {
    this.generateMockVehicles();
  }

  generateVehicle(){
    const manufacturer = faker.vehicle.manufacturer()
    return {
      manufacturerN : manufacturer
    }
  }

  render(){
    const { vehicles } = this.state;
    return (
      <div style={{ display: 'block', width: 400, padding: 30 }}>
          <ListGroup>
            {vehicles.map(item => (
              <ListGroup.Item key={item.vin}>
                <div>厂商：{item.manufacturer}</div>
                <div>型号：{item.model}</div>
                <div>车辆类型：{item.type}</div>
                <div>燃料类型：{item.fuel}</div>
                <div>VIN码：{item.vin}</div>
                <div>外观颜色：{item.color}</div>
              </ListGroup.Item>
            ))}
          </ListGroup>
      </div>
    );
  }
}

export default VehicleList

如果vehicles是初始化后就不会变动的静态数据，不需要响应式更新，也可以直接挂载为类实例属性，即在构造函数里写this.vehicles = []，后续访问时通过this.vehicles取值即可，但这种属性变化后不会自动触发组件重渲染，不适合存放需要动态更新的渲染数据。
不要在render函数里直接执行数据生成、状态修改的逻辑，会触发无限重渲染。

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