Question

我在使用先前状态在promise中设置组件状态时遇到问题。代码在这里 - https://gist.github.com/red4211/1b8ae503fc76b7a3771d45eca0b81a19

注释掉部分是错误的，但希望能让你知道我在这里想做什么。

请帮助我，我被困住了。

感谢您的帮助，现在一切正常！

Answer 1

您需要绑定promise函数，然后绑定update状态。使用concat，因为它返回一个新数组

喜欢

this.props.list.map(function(current){
     api.getStreamInfo("https://wind-bow.glitch.me/twitch-api/channels/"+current)
      .then(function(response){
        console.log(response.data);
        this.setState(function(prevState, props){
          streamObj: prevState.streamObj.concat(response.data);
        })
      }.bind(this));
    })

或

 this.props.list.map(function(current){
     api.getStreamInfo("https://wind-bow.glitch.me/twitch-api/channels/"+current)
      .then(function(response){
        console.log(response.data);
        var streamObj = [...this.state.streamObj];
        streamObj.push(response.data)
        this.setState({streamObj})
      }.bind(this));
    })

Answer 2

它的约束问题，解决使用arrow function：

this.props.list.map((current) => {
    api.getStreamInfo("https://wind-bow.glitch.me/twitch-api/channels/"+current)
    .then((response) => {
         console.log(response.data);
         let streamObj = this.state.streamObj.slice();
         streamObj.push(response.data);
         this.setState({ streamObj })
    });
})

或您也可以使用spread operator：

this.props.list.map((current) => {
    api.getStreamInfo("https://wind-bow.glitch.me/twitch-api/channels/"+current)
    .then((response) => {
        console.log(response.data);         
        this.setState((prevState) => ({ streamObj: [...prevState.streamObj, response.data] }))
    });
})

array.push 不会返回更新的array，它只返回推送的项目，因此首先将array复制到单独的变量中，然后使用更改setState更新值。

检查此代码段：

＆＃13;

let a = [1,2];

let b = [...a, 3];

console.log('a:', a);
console.log('b:', b);

＆＃13;

React，在promise中设置组件状态时遇到问题

2 个答案: