React中未定义变量

Question

我试图显示for循环结果(I<10)，但我得到的消息是"车辆"；未定义。我已经将一个变量声明为空数组，然后使用push输入for循环的结果。有什么建议吗？

class VehicleList extends React.Component {
constructor(props){
super(props);
let vehicles = []
}
vehicles(){
for (let i = 0; i < 10; i++) {
vehicles.push({
manufacturer: faker.vehicle.manufacturer(),
model: faker.vehicle.model(),
type: faker.vehicle.type(),
fuel: faker.vehicle.fuel(),
vin: faker.vehicle.vin(),
color: faker.vehicle.color()
})
}
return <div>{vehicles}</div>
}
generateVehicle(){
let manufacturer = faker.vehicle.manufacturer()
return{
manufacturerN : manufacturer
}
}
render(){
return (
<div style={{ display: 'block', width: 400, padding: 30 }}>
<ListGroup>
<div>{vehicles}</div>
</ListGroup>
</div>
);
}
}
export default VehicleList

Answer 1

我在您的代码中看到了多个问题。但一切都可以解决！

首先，使用this关键字在构造函数中实例化vehicles实例，这样您就可以在整个组件中访问它。

constructor(props) {
super(props);
this.vehicles = [];
}

接下来，在vehicles()方法中，使用this关键字引用车辆数组。

vehicles() {
for (let i = 0; i < 10; i++) {
this.vehicles.push({
// add vechiles 
});
}
}

返回<div>{vehicles}</div>可能不合适，因为vehicles是一个数组。您应该遍历它的元素，将它们添加到DOM中。

但是您可能不需要在这里返回任何内容，因为您可以直接在render()中访问vehicles(如下所示)。

我们首先通过调用vehicles()方法来更新车辆，然后迭代每个车辆以将其添加到DOM中。

render() {
// update vechiles
this.vehicles();
// render vehciles
return (
<div style={{ display: "block", width: 400, padding: 30 }}>
<ListGroup>
{this.vehicles.map((vehicle) => (
<div>{vehicle}</div>
))}
</ListGroup>
</div>
);
}

如果希望在车辆更改时重新渲染，可以将车辆存储在状态中。

最后，在您的代码中，您引用了faker。如果它是存储在props中的东西，不要忘记先从props中提取它(构造函数可能是它的好地方)，或者用props关键字到处引用它(如果它是数组，则为props.faker或props.faker[0])。

Answer 2

我将为您提供两种潜在的解决方案：

首先，尝试将this添加到车辆呼叫的前面。呃，它看起来像this.vehicle.append()。您可能还需要将this添加到声明ergolet this.vehicle = []的前面。

如果这不能解决问题，请尝试使用react状态。this.state = {vehicles: []};然后用{this.state.vehicle.append()}看见https://www.w3schools.com/react/react_state.asp