处理钩子中setState之后的回调函数

Question

我想问一下我下面使用回调函数的方法是否正确。我觉得我从Class切换到Hooks的回调函数没有像预期的那样工作。

在课堂上

componentWillReceiveProps(nextProps) {
if (typeof nextProps.checked != 'undefined' && nextProps.checked != this.state.checked) {
this.setState({checked: nextProps.checked});
}
}
onClick = () => {
var self=this;
this.setState({checked: !this.state.checked}, function () {
self.props.onChange(self.state.checked);
});
};

在钩子

const { checked,onChange } = props;
const [state, setState] = useState({
checked: !!checked
});
useEffect(() => {
setState({ ...state, checked: checked });
}, [checked]);
useEffect(() => {
onChange(state.checked)
}, [state.checked]);
const onClick = () => {
setState({ checked: !state.checked });
}

Answer 1

如果上层props.onChange处理checked状态并将其传递给该组件，那么您不需要内部处理状态?

Answer 2

我检查了你的代码，我觉得这是预期的工作。你可以在这里查看:https://codesandbox.io/s/misty-firefly-2l4tt?file=/src/App.js

但是，看到你的代码，我觉得你想把子组件中选中/未选中字段的状态传递给父组件。在这种情况下，你可以直接从子组件的onClick/onChange事件中调用onChange props，并在父组件中独立管理状态。如果你能分享一下父组件的代码，可能会帮助我更好地理解。