Javascript 如何修复'；首次访问渲染数据不是'；t不可访问，但第二次访问后，可以访问它进行渲染'；React Redux中的错误 ---------------------------------------------------------------------可从codepen.io获取工作项目：---------------------------------------------------------------------

问题是：当我输入Home并单击按钮时，它会从政府的API检索所有数据。JS在历史记录中推送链接，因此我被重定向到汽车详细信息页面。这是我第一次来到这个页面，我的内容没有加载到页面上（即使我可以通过控制台记录数据），但是当我再次访问页面时（没有重新加载），它不会出现任何错误

有人知道如何处理这个解决方案吗

这些录音显示了我的问题；
工作流程：

控制台：

有人知道到底是什么问题吗

（免责声明：请确保您同时观看，我不是以英语为母语的人，可能是我描述的问题可能会有误解。视频很棒，例如身体（鼠标/键盘）语言）

• 我在componentdidmound尝试将其添加到car.js组件的状态，并使用该引用调用该布局中的数据。 我闻到了一种味道：可能是它加载到fast的异步，所以我需要使用一些中间件，比如redux thunk来防止这种情况

import React，{Component}来自“React”；
从“react redux”导入{connect}；
类汽车扩展组件{
状态={
id:null
};
componentDidMount（）{
设id=this.props.match.params.car\u id；
这是我的国家({
id:id
});
}
render（）{
控制台日志（“CAR:”）；
console.log（this.props.car）；
控制台日志（“CAR.VOERTUIG:”）；
console.log（this.props.car.voertuig）；
const voertuig=this.props.car.voertuig；
const voertuigList=voertuig.length(
voertuig.map（汽车=>{
返回(
{car.handelsbenaming}


Datum tenaamstelling:{car.datumu tenaamstelling}


Vervaldatum APK:{car.vervaldatumu APK}

Kleur:{car.eerste_Kleur}
Lengte:{car.Lengte}

);
})
) : (
找不到有这样牌照的车！
);
const terugroepActie=this.props.car.terugroepActie；
const terugroepActieList=terugroepActie.length(
terugroepActie.map（actie=>{
返回(
Terugroep活动：{actie.categorie_defect}


Omschrijving:{actie.Omschrijving_defect}


Herstel:{actie.beschrijving_van_het_Herstel}


);
})
) : (
Geen terugroep活动：）！
);
返回(
{this.state.id}
{voertuigList}
{terugroepatielist}
);
}
}
const mapStateToProps=（state，ownProps）=>{
let id=ownProps.match.params.car\u id；
返回{
car:state.cars.find（car=>car.kenteken==id）
};
};
导出默认连接（MapStateTops）（Car）；

我期待着第二次访问的结果与第一次访问的结果相同。但事实并非如此。 我希望这是我忘记的一件小事（比如打字错误）：D

编辑：如果您注意到您看到voertuigen（荷兰语车辆）的数组（0），那么在“控制台视频”中了解可能很方便，但如果我展开数组，则可以清楚地看到数据。

---

同样，在第二次访问“控制台视频”页面后，它将更改为数组（1），并显示与状态更改相同的数据，组件重新渲染（您可以在componentWillReceivePorps中接收新的道具），因此MapStateTops将不会再次调用，这就是为什么您第一次没有获取数据，第二次所有车辆数据都已存储。 请检查以下代码并让我知道：

import React, { Component } from "react";
import { connect } from "react-redux";

class Car extends Component {
  state = {
    id: null
  };
  componentDidMount() {
    let id = this.props.match.params.car_id;
    this.setState({
      id: id
    });
  }

  render() {

    const car = this.props.cars.find(car => car.kenteken === this.props.match.params.car_id);
    const voertuig = car.voertuig;
    console.log("CAR:");
    console.log(car);
    console.log("CAR.VOERTUIG:");
    console.log(car.voertuig);



    const voertuigList = voertuig.length ? (
      voertuig.map(car => {
        return (
          <div className="car card" key={car.kenteken}>
            <div className="card-content">
              <span className="card-title">{car.handelsbenaming}</span>

              <ul className="collection">
                <li className="collection-item">
                  Datum tenaamstelling: {car.datum_tenaamstelling}
                </li>
                <li className="collection-item">
                  Vervaldatum APK: {car.vervaldatum_apk}
                </li>
                <li className="collection-item">Kleur: {car.eerste_kleur}</li>
                <li className="collection-item">Lengte: {car.lengte}</li>
              </ul>
            </div>
          </div>
        );
      })
    ) : (
        <div className="center">No car with such licenseplate found!</div>
      );

    const terugroepActie = this.props.car.terugroepActie;
    const terugroepActieList = terugroepActie.length ? (
      terugroepActie.map(actie => {
        return (
          <div className="car card" key={actie.referentiecode_rdw}>
            <div className="card-content">
              <span className="card-title">
                Terugroep actie: {actie.categorie_defect}
              </span>

              <ul className="collection">
                <li className="collection-item">
                  Omschrijving: {actie.omschrijving_defect}
                </li>
                <li className="collection-item">
                  Herstel: {actie.beschrijving_van_het_herstel}
                </li>
              </ul>
            </div>
          </div>
        );
      })
    ) : (
        <div className="center">Geen terugroep acties :)!</div>
      );

    return (
      <div className="container">
        <h4>{this.state.id}</h4>
        {voertuigList}
        {terugroepActieList}
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    cars: state.cars
  };
};

export default connect(mapStateToProps)(Car);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
类汽车扩展组件{
状态={
id:null
};
componentDidMount（）{
设id=this.props.match.params.car\u id；
这是我的国家({
id:id
});
}
render（）{
const car=this.props.cars.find（car=>car.kenteken==this.props.match.params.car\u id）；
const voertuig=car.voertuig；
控制台日志（“CAR:”）；
控制台日志（car）；
控制台日志（“CAR.VOERTUIG:”）；
控制台日志（car.voertuig）；
const voertuigList=voertuig.length(
voertuig.map（汽车=>{
返回(
{car.handelsbenaming}


Datum tenaamstelling:{car.datumu tenaamstelling}


Vervaldatum APK:{car.vervaldatumu APK}

Kleur:{car.eerste_Kleur}
Lengte:{car.Lengte}

);
})
) : (
找不到有这样牌照的车！
);
const terugroepActie=this.props.car.terugroepActie；
const terugroepActieList=terugroepActie.length(
terugroepActie.map（actie=>{
返回(
Terugroep活动：{actie.categorie_defect}


奥姆施里温