reactjs 当我使用map和其他方法时,React显示错误,

mdfafbf1  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(128)

你好,我正在使用react和axios,我需要一些来自api的数据。所以问题是为什么我在jsx中使用方法时总是出错。
例如,代码底部的Map和切片方法的Map。
此外,它的工作只有当我不刷新页面。
这是Benifits在最后一行使用map方法,但没有刷新

import React from "react";
import axios from 'axios';
import ribbon from './../../img/ribbon.png'
import share from './../../img/share.png'
import { useParams } from "react-router-dom";

function withParams(Component) {
  return props => <Component {...props} params={useParams()} />;
}

class JobPage extends React.Component {

  componentDidMount() {
    {
      let id = Object.values(this.props.params);
      console.log(id[0])
      axios.get('https://api.json-generator.com/templates/ZM1r0eic3XEy/data?access_token=wm3gg940gy0xek1ld98uaizhz83c6rh2sir9f9fu')
        .then(response => {
          this.props.setCurrentJob(response.data[id[0] - 1])
        });
    }
  }

  render() {
    {console.log(this.props);}
    return (
      <div>
        <div className="flex border-b-2">
          <div>Job Details</div>
          <div className="flex items-center"><img className="w-3 h-3 " src={ribbon} alt="img" />Save to my list</div>
          <div className="flex items-center"><img className="w-3 h-3 " src={share} alt="img" />Share</div>
        </div>
        <div>Apply Now</div>
        <div>{/* Общий*/}
          <div>
            <div>{this.props.currentJob.title}</div>
            <div>
              <div>{this.props.currentJob.salary}</div>
              <div>Brutto, per year</div>
            </div>
          </div>
          <div>Posted:{this.props.currentJob.createdAt}</div>
          <div>{this.props.currentJob.description}</div>
          <div>Responsopilities</div>
          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel quas, vero neque laborum similique facilis aliquid
            recusandae! In mollitia dolorum earum eius alias voluptates. N
            am id fugit vel optio reiciendis mollitia facere minima deserunt, dolores nemo? Dolore, quo magni, cum iste in eius deserunt nam rerum quos ipsum fuga error?</div>
        </div>
        <div>Compensation & Benefits:</div>
        <div>{this.props.currentJob.benefits.map(b=><div>{b}</div>)}</div>
      </div>

    )
  }

}
export default withParams(JobPage);

这是刷新的页面和错误

djp7away

djp7away1#

React不会等待您的请求成功后才呈现页面。
Axios get方法是异步的。一旦Axios收到来自API的响应,您就可以通过调用setCurrentJob设置currentJob的值。
在此期间,React将尝试执行currentJob.benefits.map。尽管如此,currentJob仍是未定义的,因为请求可能尚未完成或失败。
因此,在访问状态的属性之前,请确保对状态的值进行null检查。

相关问题