在使用 axios 发布请求后，使用响应数据更新我的组件的状态

Question

我正在尝试使用 axios 在 Post 请求后使用响应数据更新我的组件的状态，但是当我使用 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);
        }
      });

   
  };

提前致谢

Answer 1

在 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])