Question

我正在尝试在函数中设置状态。通常，我只是将其转换为箭头函数或将其绑定以解决问题，但是，如果我将此特定函数转换为箭头函数，则不会得到所需的结果（将其用作图层中的图像映射响应）开放层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()
    }

Answer 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);
});

Answer 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函数不是箭头功能（希望如此）

无法读取未定义的属性“ setState”-转换为箭头功能

2 个答案: