从 React 中的 fetch 调用呈现 JSON 时，“无法读取未定义的属性‘setState’”答案

【问题标题】：'Cannot read property 'setState' of undefined' when rendering JSON from fetch call in React从 React 中的 fetch 调用呈现 JSON 时，“无法读取未定义的属性‘setState’”
【发布时间】：2020-02-27 05:34:31
【问题描述】：

我是 React 新手，我使用 create-react-app 创建了一个应用程序。我有一个 Golang HTTP 服务器，我正在使用 fetch 发送一个 GET 请求，接收一个 JSON 作为响应。这部分工作完美。想要呈现这个 JSON 就会出现问题。现在我不关心格式。我只是希望能够打印出来。

使用 this.setState 行我得到一个错误：

未处理的拒绝（TypeError）：无法读取未定义的属性“setState”

我在 Stack Overflow 和其他网站上看到了很多问题，但我找不到任何解释为什么会发生这种情况。

constructor(props) {
    super(props);

    this.state = {
        siteData: []
    };
}

componentDidMount() {
    console.log("Send GET request to Go server")
    fetch("http://localhost:8080/site", {
        method: "GET",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            'Access-Control-Allow-Origin': '*',
        }
    }).then(function(response) {
        if (response.status === 200) {
            response.text().then(function(data) {
                console.log("Get response data: " + data);
                console.log(response);
                //siteData = JSON.parse(data);

                this.setState({
                    siteData: JSON.parse(data)
                });

            });
        }
    })
}

【问题讨论】：

通常人们不会直接在componentdidMount内部调用API。也可以尝试使用箭头函数进行回调
@Sujit.Warrier 我认为在componentDidMount中调用API是可以的。您可以定义服务或其他辅助方法，但我认为它们通常在 componentDidMount 中调用。你有什么建议？
@bravemaster 很好，但通常你不会将 API 调用直接放在组件中，因为它不能被重用
@Sujit.Warrier 在 React 中，一切都是组件。除非它使用静态模型数据，否则必须调用 Api 才能获取数据。并且应该在 componentDidMount 中调用该方法。获取数据后，这些数据将作为道具传递给子组件。所以在componentDidMount中调用api是可以的，也很常见。但是像上面的代码那样硬编码 url 是一种不好的做法。你怎么看？
@Sujit.Warrier 您建议我如何改进使用 fetch 的方式和地点？

标签： reactjs

【解决方案1】：

promise this 的回调函数内部与 react 组件的 this 不一样。

在回调中使用Arrow function 将react 组件的上下文传播到回调函数。

<your_code>.then(response => {
        if (response.status === 200) {
            response.text().then(data => {
                console.log("Get response data: " + data);
                console.log(response);
                //siteData = JSON.parse(data);

                this.setState({
                    siteData: JSON.parse(data)
                });

            });
        }
    })

【讨论】：

你建议我如何在渲染函数中使用这个 siteData 变量？
一旦你设置了状态siteData，你就可以通过this.state.siteData从组件内的任何地方访问它
当我尝试 .map 变量时，我收到一条错误消息，指出它不是函数。 ://
'.map' 仅适用于 Array。可能你在尝试map 一个可用的数组，请记住fetch 和setState 都是asynchronous
这是我的示例 sn-p 之一，用于在反应中使用 fetch api：codepen.io/mostafiz93/pen/KKpmPjM 您可以设置初始状态以避免 undefined 状态数据。