javascript - 如何修复 React-Redux 中的 'First visit render data isn' 无法访问，但第二次访问后可以进行渲染错误

Question

------------------------------------------------------------ ----------------------
codepen.io 上提供的工作项目:https://codesandbox.io/embed/happy-tharp-slvf5
------------------------------------------ ---------------------------

问题:当我输入“Home”并单击按钮时，它会从政府的 API 检索所有数据。 JS 将链接推送到历史记录中，因此我被重定向到汽车详细信息页面。我第一次访问此页面时，我的内容未加载到页面上(即使我可以控制台记录数据)，但是当我再次访问该页面(无需重新加载)时，它可以正常工作，没有任何错误。

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

这些录音显示了我的问题；
工作流程:
https://youtu.be/H8YoIkQ2MHk
控制台:
https://youtu.be/KtVujQuH8ec

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

(免责声明:请确保同时观看它们，我的母语不是英语，我描述的问题可能会有误解。这些视频很棒，例如肢体(鼠标/键盘)语言)

• 我尝试在 compononentDidMound 将其添加到 car.js 组件的状态中，并使用该引用调用该布局中的数据。我有一种感觉:也许它可能是异步加载太快，所以我需要使用一些中间件，比如 redux-thunk 来防止这种情况发生？

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() {
    console.log("CAR:");
    console.log(this.props.car);
    console.log("CAR.VOERTUIG:");
    console.log(this.props.car.voertuig);
    const voertuig = this.props.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) => {
  let id = ownProps.match.params.car_id;
  return {
    car: state.cars.find(car => car.kenteken === id)
  };
};

export default connect(mapStateToProps)(Car);

我预计第二次访问也会在第一次访问中得到相同的结果。但事实并非如此。我希望这是我忘记的一些小事情(比如打字错误)。 :D

编辑:如果您注意到看到 voertuigen(荷兰语车辆)的 Array(0)，那么在“控制台视频”中也许很容易知道，但如果我展开数组，我可以清楚地看到数据。同样，在第二次访问“控制台视频”中的页面后，它会更改为 Array(1) 并显示相同的数据🤔。

Answer 1

随着状态的变化，组件重新渲染(您可以在 componentWillReceivePorps 中接收新的 Prop )，因此 mapStateToProps 不会再次调用，这就是为什么您第一次没有获取数据，第二次所有汽车数据都已存储。请检查下面的代码并告诉我:

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);