时间戳

首页 > 解决方案 > 反应值返回为未定义

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;

标签： javascriptreactjsreact-context

解决方案

这就是静态类型检查器可以真正为您节省一些白发的事情。

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

但是，它确实有一个属性cars。

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

:)

推荐阅读