如何在更新后将函数传递给SetState回调?(Reactjs)

Question

我在询问之前搜索了很多，但似乎找不到适合我的解决方案。

我有一个函数，我需要在状态设置为新值后调用。

const onClickCallback = () => {
setState(..., setCallback())
}
const setCallback = () => {
console.log(State) // this prints the old State value
if(State === something){
....
}
}

即使设置状态回调函数被调用时,它仍然被年长的价值。

我不确定问题是出在我这边还是根本不可能。

Answer 1

与类组件的this.setState不同，函数组件的useState状态更新函数在任何状态更新之后都不需要第二个回调参数。

你正在做的是将状态更新排队并传递无关的参数，其中一个是你立即调用的函数，并将任何返回值传递给setState，该值将被忽略。

setState(..., setCallback()) // setCallback invoked and result passed

使用一个依赖于状态的useEffect钩子来记录任何状态更新。

const onClickCallback = () => {
setState(...);
};
React.useEffect(() => {
console.log(State) // this prints the updated state value
if(state === something){
....
}
}, [state, /* add other dependencies here */]);

useEffect与依赖数组的作用相当于componentDidMount和componentDidUpdate。这是上面用来"反应"的componentDidUpdate生命周期。到状态更新和触发副作用。

Answer 2

First

这个问题与React无关，你的方法会导致setCallback()函数首先被执行。

我编辑你的代码和演示结果:

const onClickCallback = () => {
// Here will run setCallback function before setState function.
setState('...', setCallback())
}
const setCallback = () => {
console.info('run setCallback')
}
const setState = () => {
console.info('run setState')
}
onClickCallback()

第二回答你的问题，你可以使用useEffect来实现你的目标。

简单的例子:

const {useState, useEffect} = React;
const DemoComponent = (props) => {

const [state, setState] = useState('initialState')
useEffect(() => {
if (state === 'something') {
console.info('state:' + state)
}
}, [state])
const onClickCallback = () => {
setState('something')
}
return (
<div>
<button onClick={onClickCallback}>Click</button>
</div>
);
}
ReactDOM.render(
<DemoComponent />,
document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>