你好,我正在使用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);
这是刷新的页面和错误
1条答案
按热度按时间djp7away1#
React不会等待您的请求成功后才呈现页面。
Axios get方法是异步的。一旦Axios收到来自API的响应,您就可以通过调用setCurrentJob设置currentJob的值。
在此期间,React将尝试执行currentJob.benefits.map。尽管如此,currentJob仍是未定义的,因为请求可能尚未完成或失败。
因此,在访问状态的属性之前,请确保对状态的值进行null检查。