Axios+React(Next.js) Post请求后状态上下文丢失问题排查

你的问题出在闭包捕获旧状态上：

• add函数在组件每次渲染时会捕获当前的images状态值
• Axios请求是异步操作，当请求完成执行add时，组件可能已经经过多次渲染，但add里的images还是最初捕获的旧值（也就是空数组）
• 所以每次执行setImages([...images, url])时，都是基于空数组添加新url，覆盖了之前的状态

修复方法 #

把状态更新改成函数式更新，React会自动传入最新的前一状态，确保每次更新都基于最新值：

const add = (url) => {
    setImages(prevImages => [...prevImages, url])
}

补充说明 #

函数式更新是处理异步操作下状态更新的标准方案，它能避免闭包带来的旧状态问题，确保每次状态变更都依赖最新的状态快照。

内容的提问来源于stack exchange，提问作者August Bjornberg