django - 为什么 React fetch 检索空白对象?
问题描述
我有一个有效的 Django REST API,它返回:
{
"id": 1,
"brand": "peugeot",
"model": "3008",
"variant": "allure"
}
我正在使用以下代码来获取上述数据:
render() {
const { brand, model, variant } = this.props;
let url = `http://127.0.0.1:8000/api/car/${brand}/${model}/${variant}/`;
console.log(url) <== url is correct when checked in console
fetch(url)
.then(response => response.json())
.then(data => data.length === 0 ? this.setState({
data : data
}) : null ) <== I have used a condition for setState to stop fetching infintely
const { data } = this.state;
console.log(data) <== This is a blank object with no data in console
console.log(data.id) <== This is undefined in console
return (
<div>
{data.id} <== No data is shown on webpage
Car Details
</div>
);
}
当我尝试在我的网页上获取数据时没有显示错误。我究竟做错了什么?
当我有一个对象数组时,可以从同一个 API 服务器获取 PS 数据,并且我用它map
来循环数据。在这里,我试图获取一个项目,所以没有数组,只有一个对象。我在语法上做错了吗?
解决方案
你不应该fetch
或setState
在render
函数内部。
render
由于各种副作用,即滚动,单击,改变道具等而被多次调用。这种代码可能会导致各种麻烦。
如果您需要执行一次请求,请调用fetch
里面的函数componentDidMount
。另外,我相信你的回调应该是这样的:
fetch(url)
.then(response => response.json())
.then(data => this.setState({ data : data }))
取自文档:
componentDidMount()
在安装组件后立即调用。需要 DOM 节点的初始化应该放在这里。如果您需要从远程端点加载数据,这是实例化网络请求的好地方。
推荐阅读
- android - 如何在android中使用OkHttp3网络库缓存数据
- python - Python JSON 加密出错,psycopg2 将 JSON 数据转换为单引号
- python - 在填充每个类别的缺失值后,如何重塑长到宽的数据框熊猫?
- sql - 使用 postgres 仅更新日期字段中的年份
- ios - 为什么我进入图像查找时没有输出在lldb?
- javascript - 转换“在表格中绘图”功能 - 从 jQuery 到纯 JS
- html - 我如何做动态尺寸框
- r - 在 R 中使用线性代数计算避免内存分配
- django - Django窗口函数FirstValue产生无效的SQL
- dart - 如何提高颤振性能?