我使用此类来显示和过滤列表。该类还会触发搜索。
我的问题似乎是setState函数不是立即的。
FriendActions.getSearchList(this.state.search);
如果我评论这个动作。 console.log将按原样打印状态。 如果没有'搜索'国家将"消失"。
我认为在状态发生变化之前,可能会发生变化事件。但我真的不知道。
我希望我已经清楚了。如果没有随时向我询问更多信息。
onSearch(event){
this.setState({search: event.target.value});
if (this.state.search !== '')
FriendActions.getSearchList(this.state.search);
}
class FriendList extends React.Component {
constructor(props) {
super(props);
this.state = FriendStore.getState();
this.onChange = this.onChange.bind(this);
this.filterByUsername = this.filterByUsername.bind(this);
// limit this function every 200 ms
this.onSearch = debounce(this.onSearch, 200);
}
componentDidMount () {
FriendStore.listen(this.onChange);
FriendActions.getFriendsList();
}
componentWillUnmount() {
FriendStore.unlisten(this.onChange);
}
onChange(state) {
console.log(state);
this.setState(state);
}
onSearch(event){
this.setState({search: event.target.value});
if (this.state.search !== '')
FriendActions.getSearchList(this.state.search);
}
答案 0 :(得分:1)
你需要改变你的逻辑。这样的事情应该有效:
onSearch(event){
var search = event.target.value;
if (search !== '') {
FriendActions.getSearchList(search);
}
this.setState({search: search}); // w/ ES6: this.setState({search});
}
你是正确的setState
不是即时的。原因是您可以在代码中进行多次setState
次调用。 React将在render
上运行setState
。出于性能原因,它等待所有setState
调用完成后再渲染。
替代解决方案(不推荐): 手动设置状态
this.state = 'whatever';
并自行更新
this.forceUpdate();