为什么 React fetch 检索空白对象？答案

【问题标题】：Why does React fetch retrieve blank object?为什么 React fetch 检索空白对象？
【发布时间】：2018-06-08 08:27:08
【问题描述】：

我有一个有效的 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 服务器获取数据，并且我使用 map 循环数据。在这里，我试图获取单个项目，因此没有数组，只有一个对象。我的语法有问题吗？

【问题讨论】：

标签： django reactjs rest api fetch

【解决方案1】：

您永远不应该在 render 函数中使用 fetch 或 setState。

render被多次调用，由于各种副作用，如滚动、点击、改变道具等。这种代码可能会引起各种麻烦。

如果您需要执行一次请求，请调用componentDidMount 内的fetch 函数。另外，我相信你的回调应该是这样的：

fetch(url)
  .then(response => response.json())
  .then(data => this.setState({ data : data }))

取自docs：

componentDidMount() 在组件安装后立即调用。需要 DOM 节点的初始化应该放在这里。如果您需要从远程端点加载数据，这是一个实例化网络请求的好地方。

【讨论】：

我听从了您的建议，并在 componentDidMount 和 componentDidUpdate 中获取了数据。谢谢。

【解决方案2】：

我将 'setState' 之前的条件更改为 JSON.stringify(data) !== JSON.stringify(this.state.data)，现在它可以工作了。

【讨论】：

这是非常糟糕的做法。我建议阅读我的答案以更好地理解原因。

【解决方案3】：

应该是：

.then(data => data.length > 0 ? this.setState({ data }) : null )

【讨论】：

但是，如果我完全删除条件，它会无限调用 API，但会正确显示数据。
虽然此代码 sn-p 可能是解决方案，但 including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。