返回未定义的反应值

Question

我正在尝试在上下文中映射数据并呈现汽车列表。但是我让运行陷入某种错误。我希望能够 select 其中一辆车，并让它导航到显示该车更多详细信息的另一个页面。当前错误是（类型错误：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;

Answer 1

在这种情况下，静态类型检查器确实可以为您省去一些白发。

你的上下文确实没有任何属性car。

但是，它确实有属性 cars。

所以你应该映射汽车，即 value.state.cars.map(car => ...)

:)

返回未定义的反应值

React value returning as undefined

javascript

reactjs

react-context