将参数从状态传递到复选框树

Question

我有这样的代码:

constructor(props) {
super(props);
this.dispatch = props.dispatch;
this.state = {
checked: [],
expanded: [],
};
const {dispatch, match, t} = this.props;
this.onCheck = this.onCheck.bind(this);
this.onExpand = this.onExpand.bind(this);
}
onCheck(checked) {
this.setState({ checked });
console.log(this.state.checked);
this.loadProducts(this.state.checked);
}
onExpand(expanded) {
this.setState({ expanded });
}
render() {
const { checked, expanded } = this.state;
console.log(checked);
........
<CheckboxTree
nodes={this.props.chosenCategory.children}
checked={checked}
expanded={expanded}
onCheck={this.onCheck}
onExpand={this.onExpand}
.......
/>

问题是在render函数的console.log中，我有正确的checked值。但在函数onCheckchecked中，有先前的值。我不明白是什么问题。你能帮我一下吗?

Answer 1

由于setState的异步行为，我们不能保证以下行在特定实例中具有更新的值。

在你的例子中，如果你想记录onCheck中更新的值，你可以使用setState函数提供的回调。

onCheck(checked) {
this.setState({ checked }, () =>  {
this.loadProducts(this.state.checked); //param - checked will also do
console.log(this.state.checked);
});
}

现在console.log将执行，setState成功后。

Answer 2

setState有两种类型，第一种以对象作为参数，第二种以函数作为参数。两者的区别是第一个是异步的，第二个是同步的。

所以你需要使用setState和function作为参数。

onCheck(checked) {
this.setState((state) => ({ checked}));
console.log(this.state.checked);
this.loadProducts(this.state.checked);
}