Назначьте функцию возвращать объект переменной и передать ее компоненту в качестве опоры

Question

У меня возникли проблемы с выполнением последней работы здесь. Мне нужно взять объект, который возвращается из метода _request и назначить его переменной propVals в методе рендеринга, а затем передать эту переменную в propValues ​​для компонента SingleChannel, как вы можете видеть. Моя проблема в том, что propVals не определен, когда я возвращаю компонент SingleChannel. Я знаю, что инструкции if возвращают то, что они должны быть, поэтому проблема заключается в том, что компонент SingleChannel обрабатывается до того, как propVals получает объект. Я действительно не знаю, что еще делать. Я также попытался вызвать метод непосредственно из компонента 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

Поскольку существует АЯКС вызова (Асинхронный логика), рекомендуется использовать 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().

As _request is async function, в этом обратном вызове вы должны использовать метод 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> 
     ); 
    } 
}