无法读取未定义的属性“setState” - 转换为箭头函数答案

【问题标题】：Cannot read property 'setState' of undefined - Converted to arrow function无法读取未定义的属性“setState” - 转换为箭头函数
【发布时间】：2019-11-15 05:39:17
【问题描述】：

我正在尝试在函数中设置状态。通常我只会将其转换为箭头函数或将其绑定以解决问题，但是如果我将此特定函数转换为箭头函数，我将无法获得所需的结果（这是用作图层的图像映射响应开放层 6）。我怀疑这是因为 this.response 部分代码位于回调函数内部。

这是代码。

this.makeRequest(newSrc, function() {
                const arrayBufferView = new Uint8Array(this.response)
                const blob = new Blob([arrayBufferView], { type: 'image/png' })
                const urlCreator = window.URL || (window).webkitURL
                const imageUrl = urlCreator.createObjectURL(blob)
                tile.getImage().src = imageUrl
                this.setState({
                    isLoading: false
                })
            })

我尝试将其转换为停止 setState 的箭头函数不是函数问题，但不会返回 fe 上的地图。对于上下文，makeRequest 函数是一个新的 XMLHttpRequest

makeRequest = (url, onLoad) => {
        this.setState({
            isLoading: true
        })
        const client = new XMLHttpRequest()
        client.open('GET', url)
        client.responseType = 'arraybuffer'
        client.setRequestHeader('Authorization', getCredential())
        client.onload = onLoad
        client.send()
    }

【问题讨论】：

如果您可以发布代码的其他部分，例如调用函数的位置和方式，将会很有帮助
它是从另一个加载新 ImageWMS 图层的函数调用的。这构成了 OpenLayers 中内置的 imageLoadFunction 的一部分
@JosephD。这是一个类组件
我相信回调函数应该将响应作为参数，例如this.makeRequest(newSrc, (response) => { /* should be able to access both the response AND setState in here */ })
@Jayce444 谢谢我也试过了，但现在仍然没有显示地图数据:(

标签： javascript reactjs

【解决方案1】：

调用makeRequest 的代码不应该负责更新状态。此外，为了更容易调试，不要过多依赖绑定，只需将响应作为回调参数提供

这应该可行：

makeRequest = (url, onLoad) => {
  this.setState({
    isLoading: true
  });
  const client = new XMLHttpRequest();
  client.open('GET', url);
  client.responseType = 'arraybuffer';
  client.setRequestHeader('Authorization', getCredential());
  client.onload = () => {
    onLoad(client.response);
    // Updating "isLoading" should be done only in the function
    // doing the network operation
    this.setState({
      isLoading: false
    });
  };
  client.send();
};


this.makeRequest(newSrc, function(response) {
  const arrayBufferView = new Uint8Array(response);
  const blob = new Blob([arrayBufferView], { type: 'image/png' });
  const urlCreator = window.URL || (window).webkitURL;
  tile.getImage().src = urlCreator.createObjectURL(blob);
});

【讨论】：

【解决方案2】：

makeRequest = (url, onLoad) => {
    this.setState({
        isLoading: true
    })
    const client = new XMLHttpRequest()
    client.open('GET', url)
    client.responseType = 'arraybuffer'
    client.setRequestHeader('Authorization', getCredential())
    client.onload = onLoad.bind(this)
    client.send()
}

试试这个，我希望这能奏效。

onLoad 函数不是箭头函数（我希望）这就是它不起作用的原因

【讨论】：