将函数返回对象分配给变量并将其作为道具传递给组件

Question

我在这里做最后一件事情时遇到问题。我需要从_request方法获取对象，并将其分配给render方法中的propVals变量，然后将该变量传递给SingleChannel组件上的channelValues prop，如您所见。我的问题是，当我返回SingleChannel组件时propVals未定义。我知道if语句正在返回它们应该是什么，所以问题是在propVals接收对象之前正在呈现SingleChannel组件。我真的不知道还有什么要做。我也试着直接从SingleChannel组件调用方法，例如channelValues = {this._request（channel.name）}。

_request(name) { 
HTTP.call('GET', `https://api.twitch.tv/kraken/streams/${name}`, 
    {headers: {Accept: 'application/vnd.twitchtv.v3+json'} }, 
    function(error, response) { 
    if(error) { 
     console.log(error) 
    } else { 
     if(response.data.stream === null) { 
     return {streaming: false, game: "Not playing anything"} 

     } else { 
     return {streaming: true, game: response.data.stream.game} 


     } 
    } 

    }); 
} 
renderChannels() { 
    const channels = this.props.channels; 
    console.log(channels) 
    return channels.map((channel) => { 
    const propVals = this._request(channel.name); 
    //console.log(propVals); 
    return <SingleChannel key={channel._id} channel={channel} channelValues={propVals}/> 

    }); 


} 

Answer 1

由于存在AJAX调用（异步逻辑），则建议使用componentDidMount：

componentDidMount:function(){ 
    var that=this; 
    this._request(name,function(){ 
     that.setState({propVals:propVals}) 
    }); 

} 

在AJAX回叫，呼叫setState：

_request(name,fnback) { 

     //if success 
     fnback.call(null); 
} 

然后，在render使用this.state.propVals：

return <SingleChannel key={channel._id} channel={channel} channelValues={this.state.propVals}/> 

Answer 2

问题是，在if语句中，您从回调函数返回值，而不是从_request()。

由于_request是异步函数，在它回调中，应该使用setState方法，将派生数据添加到当前状态。

考虑使用此方法：

class Parent extends Component { 
    constructor(props) { 
     super(props) 

     this.state = { 
      values: {} 
     }; 

     this._request = this._request.bind(this); 
    } 

    componentWillMount() { 
     // Iterating through channels, and calling `_request` for each channel. 
     this.props.channels.forEach(this._request); 
    } 

    // We are accepting whole `channel` variable, instead of `name`. 
    // As we need access to `channel._id` from this function. 
    _request(channel) { 
     HTTP.call('GET', `https://api.twitch.tv/kraken/streams/${channel.name}`, { 
      headers: { 
       Accept: 'application/vnd.twitchtv.v3+json' 
      }, 
     }, (error, response) => { 
      if (error) { 
       console.log(error) 
      } else { 
       let result; 

       if (response.data.stream === null) { 
        result = { 
         streaming: false, 
         game: "Not playing anything" 
        }; 
       } else { 
        result = { 
         streaming: true, 
         game: response.data.stream.game 
        } 
       } 

       // Adding result to state. It forces component to rerender with derived data. 
       // Note, we need to use `Object.assign` to avoid state mutations. 
       this.setState({ 
        values: Object.assign({}, this.state.values, { 
         [channel._id]: result, 
        }) 
       }); 
      } 
     }); 
    } 

    render() { 
     return (
      <div> 
       {this.props.channels.map(channel => { 
        return (
         <SingleChannel 
          key={channel._id} 
          channel={channel} 
          channelValues={this.state.values[channel._id]} 
         /> 
        ); 
       })} 
      </div> 
     ); 
    } 
}