Javascript 返回未定义的响应值

我试图在上下文中映射数据，并呈现出一个汽车列表。但我总是遇到一些错误。我想能够选择其中一辆车，并让它导航到另一个页面，显示更多的汽车细节我。当前错误为（TypeError:value.state.car未定义）。任何帮助都会很好！现行代码

Context.js
import React, {Component } from 'react';
import { carInventory } from './data';

export const MyContext = React.createContext();

export class MyProvider extends Component {
state = {
  cars: []
};
componentDidMount() {
  this.setCars();
}
setCars = () => {
  let tempProducts = [];
  carInventory.forEach(item =>{
    const singleItem = {...item};
    tempProducts = [...tempProducts,singleItem];
  })
  this.setState(()=>{
    return {cars:tempProducts}
  })
}
getItem = (id) => {
  const car = this.state.cars.find(item => item.id === id);
  return car;
}
handleDetail = (id) =>{
  const car = this.getItem(id);
  this.setState(()=>{
    return {detailProduct:car}
  })
}

  render() {
    return (
      <MyContext.Provider value={{
          state: this.state,
          handleDetail: this.handleDetail}}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

VehicleList.js
import React, { Component } from "react"
import './App.css';
import Vehicles from "./Vehicles"
import { MyProvider, MyContext } from "./Context";

export default class VehicleList extends Component {
  render() {
    return (
        <div className="vehicles">
          <div className="showcase">
          <MyContext.Consumer>
            {(value) => (
              <React.Fragment>
                {value.state.car.map(car => {
                return (
                  <Vehicles key={car.id} car=
                  {car} />
                    );
                  })}
              </React.Fragment>
            )}
          </MyContext.Consumer>
        </div>
      </div>
    )
  }
}

import React, { Component } from 'react';
import './App.css';
import { MyProvider, MyContext } from "./Context";
import { Link } from 'react-router-dom';


class Vehicles extends Component {
  render() {
    const { make, model, id, info, img } = this.props.cars
    return (
      <div className="col-9 mx-auto col-md-6 col-lg-3 my-3">
        <div className="card">
          <MyContext.Consumer>
            {(value) => (<div className="img-container p-5"
            onClick={() =>{
              value.handleDetail(id)
            }}>
            <Link to="/VehicleOverview">
              <img src={img} alt="product" className="card-img-top"/>
            </Link>
            </div>)}
          </MyContext.Consumer>
        </div>
      </div>
    )
  }


}

export default Vehicles;

Context.js
从“React”导入React，{Component}；
从“./data”导入{carInventory}；
export const MyContext=React.createContext（）；
导出类MyProvider扩展组件{
状态={
汽车：[]
};
componentDidMount（）{
这个。setCars（）；
}
setCars=（）=>{
设tempProducts=[]；
carInventory.forEach（项=>{
常量singleItem={…item}；
tempProducts=[…tempProducts，singleItem]；
})
此.setState（（）=>{
返回{cars:tempProducts}
})
}
getItem=（id）=>{
const car=this.state.cars.find（item=>item.id==id）；
返回车；
}
handleDetail=（id）=>{
const car=this.getItem（id）；
此.setState（（）=>{
返回{detailProduct:car}
})
}
render（）{
返回(
{this.props.children}
)
}
}
VehicleList.js
从“React”导入React，{Component}
导入“/App.css”；
从“/车辆”进口车辆
从“/Context”导入{MyProvider，MyContext}；
导出默认类车辆列表扩展组件{
render（）{
返回(
{（值）=>(
{value.state.car.map（car=>{
返回(
);
})}
)}
)
}
}
从“React”导入React，{Component}；
导入“/App.css”；
从“/Context”导入{MyProvider，MyContext}；
从'react router dom'导入{Link}；
类车辆扩展组件{
render（）{
const{make，model，id，info，img}=this.props.cars
返回(
{（值）=>({
值。handleDetail（id）
}}>
)}
)
}
}
出口默认车辆；

在这种情况下，静态类型检查器可以真正为您节省一些白发

您的上下文确实没有任何属性

car

但是，它确实有一个属性

cars

因此，您应该映射汽车，即

value.state.cars.map（car=>…）

---

：）

您的状态变量是

car

还是

cars

？啊，谢谢！但是现在我似乎得到了另一个类型错误，因为这个$props$cars在我的车辆组件中没有定义。好吧，再次看看你传递到车辆组件中的道具

所以它应该是

const{make，model，id，info，img}=this.props.car

。