您好，我正在使用 react 和 axios，我需要一些來自 api 的資料。所以問題是為什么當我嘗試在我的 jsx 中使用方法時總是出錯。
例如代碼底部的地圖和使用切片方法的相同內容。
此外，它僅在我沒有重繪 頁面時才有效。
這是在最后一行使用 map 方法但沒有重繪 的 Benifits
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);
這是重繪 的頁面和錯誤
uj5u.com熱心網友回復：
React 不會等待您的請求成功呈現頁面。
axios get 方法是異步的。一旦 Axios 收到來自 API 的回應，您就可以通過呼叫 setCurrentJob 來設定 currentJob 的值。
在此期間，React 將嘗試執行 currentJob.benefits.map。盡管如此， currentJob 是未定義的，因為請求可能尚未完成或失敗。
因此，請確保在訪問您的狀態的屬性之前對您的狀態的值進行空檢查。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/525310.html
標籤：javascript反应
上一篇：無法在GraphQL背景關系中找到Prisma客戶端。請在`context[\"customPrisma\"]`鍵下提供它