将函数返回对象分配给变量并将其作为道具传递给组件
问题描述:
我在这里做最后一件事情时遇到问题。我需要从_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}/>
});
}
答
由于存在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}/>
答
问题是,在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>
);
}
}
帮我出了不少这样的感谢,但_request方法取决于地图功能,将它传递通道的名称,让我不知道该怎么做在componentDidMount中。我把它留给了我,但是把它从返回对象改变为设置状态并在一定程度上起作用。现在我的地图功能似乎变得疯狂,并且不断地重复遍历频道。 –
@nickkasamis你能否提供你当前的代码到pastebin.com,以更清楚地理解你? – 1ven
http://pastebin.com/2Q7UDTrt - 我的假设是,当组件被加载时,数组被映射,并且每个项目将调用请求方法,该方法应该设置状态然后输出Strike元素通过当前状态作为道具。 –