带有第二个参数反应钩子的函数

Question

我想要的只是，在更改状态后，我想运行第二个参数。

没有钩子..这就是它的样子

state = {
gasTypeFrom: '',
}
setModal = item => {
setState({ gasType: item }, () => {
renderFrom();
});
};

这是我用钩子尝试过的

const [froms, setFroms] = useState({
gasType: 'Select Value Here',
displayModal: false,
});
function setModalFrom(item) {
useEffect(
() => {
setFroms({...froms, gasType: item});
},
() => {
renderModalFrom();
}
);
console.log('setModalFrom()', froms.gasType);
}

如何在带有第二个参数的钩子中做到这一点？

Answer 1

useEffect接受函数回调和依赖数组，因此当依赖数组中的值更新时，将触发效果。

const [froms, setFroms] = useState({
gasType: 'Select Value Here',
displayModal: false,
});
useEffect(() => {
renderModalFrom();
}, [froms]); // when a value here updates, effect is run
...somewhere in your code
setFroms({...froms, gasType: item}); // this updates the value

使用效果文档