React中的状态更改后，运行函数的预期方式是什么?(不包括初始渲染)

Question

在setState((函数完成后，是否有执行函数的方法？例如

const TestComponent = () => {
const [value, setValue] = useState(null)
const apiRequest = async () => {
const reply = await fetch(`/api/${value}`)
const response = await reply.json()
console.log(response)
}
const handleClick = async () => {
setValue(value + 1)
apiRequest(value)
}
return (
<>
<button onClick={handleClick}>Call API</button>
</>
)
}

假设我有这个组件，我想点击一个按钮并点击API。当然，apiRequest不会为value状态使用正确的值。假设我确实想使用正确的值，是否有任何方法可以保留这个流，但要以有效的方式进行？我知道我可以使用useEffect，但假设我不想每次value更改时都使用此逻辑。

Answer 1

useEffect(或useLayoutEffect(是迄今为止最好、最可靠的方法-如果适合任务，不要害怕使用它。如果你出于某种原因不想使用它，唯一其他合适的方法是将新的状态值放入变量中，并根据需要传递它——但这需要使用它的函数来使用参数，而不是使用外部状态变量。

const apiRequest = async (value) => {
const reply = await fetch(`/api/${value}`)
const response = await reply.json()
console.log(response)
}
const handleClick = async () => {
const newValue = value + 1;
setValue(newValue)
apiRequest(newValue)
}