reactjs - 在使用 axios 发布请求后,使用响应数据更新我的组件的状态
问题描述
我正在尝试使用 axios 发布请求后使用响应数据更新组件的状态,但是当我使用 console.log() 注销更新状态时它返回一个空数组,但显示使用 .然后在浏览器控制台中的axois中。请帮帮我
代码从这里开始
const [offers, setOffers] = useState({});//THIS IS THE STATE
const search async (e) => {
e.preventDefault();
const options = {
url: "localhost:8080/api/search",
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json;charset=UTF-8",
},
data,
};
axios(options)
.then((response) => {
console.log(response.data.data);// THIS RETURNS OBJECT DATA GOTTEN FROM THE SERVER AFTER POST REQUEST
setOffers(response.data.data); //IT DOES NOT UPDATE WITH RESPONSE DATA
console.log(offers); = IT RETURNS AND EMPTY ARRAY
})
.catch(function (error) {
if (error.response) {
setValerr(error.response.data.errors);
console.log(error.response);
}
});
};
提前致谢
解决方案
在 react 中,setState 是异步的,因此当您调用“setOffers”时,它是一个异步操作。因此,当您调用 console.log 时,优惠可能尚未更新。
你可以在这里阅读更多关于它的信息: https ://reactjs.org/docs/faq-state.html#when-is-setstate-asynchronous
要收听“优惠”的价值,您可能需要使用 useEffect
一个例子
const [offers, setOffers] = useState({}) //THIS IS THE STATE
const search = async (e) => {
e.preventDefault()
const options = {
url: 'localhost:8080/api/search',
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json;charset=UTF-8',
},
data,
}
axios(options)
.then((response) => {
console.log(response.data.data) // THIS RETURNS OBJECT DATA GOTTEN FROM THE SERVER AFTER POST REQUEST
setOffers(response.data.data) //IT DOES NOT UPDATE WITH RESPONSE DATA
console.log(offers)
})
.catch(function (error) {
if (error.response) {
setValerr(error.response.data.errors)
console.log(error.response)
}
})
}
useEffect(() => {
// This should log offers to the console if it has been set
if(offers) {
console.log(offers)
}
}, [offers])
推荐阅读
- c# - 如何使用 Emgu.CV 以 30 FPS 获得 1920*1080 作为默认值?
- mysql - mysql8 新管理员用户无法授予代理
- android - 像 WhatsApp 一样以 PIP 模式播放 YouTube 视频
- laravel-nova - Laravel Nova 多对多关系表
- java - Spring Cloud 流反序列化不同的 pojo
- r - How to align the text on the right side of the value box in R shiny?
- ios - 如何获取在 iOS Keychain 中创建和存储的密钥的唯一标识符
- image - 如何保护网站访问者的图像?
- azure - 自定义 Azure AD B2C 登录页面
- flutter - 我正在尝试运行默认的颤振应用程序,但出现错误