时间戳

首页 > 解决方案 > 反应类组件不更新状态

javascript - 反应类组件不更新状态

问题描述

我有一个 SubmitEvent 类组件，它使用服务类来使用 Axios 检索场所。

  export default class SubmitEvent extends React.Component {
  constructor(){
      super();
      this.state = {
          loggedIn: undefined,
          venues: []
      }
      this.checkLoggedIn.bind(this);
      this.getVenues.bind(this);
  }
  checkLoggedIn = () => {
    let token = localStorage.getItem("auth-token");
    if (token === "") {
      return false;
    }
    return true;
  };
  getVenues = async () => {
    let res = [];
    await Axios.get("/venues",{
      headers:{
        "Content-Type":"application/json",
      }
    })
    .then((response) =>{
      res = response.data
      console.log(res)
    })
    .catch(err => console.log(err))
    return res;
  }

  componentDidMount() {
    this.setState({
      loggedIn: this.checkLoggedIn(),
      venues: this.getVenues()
    });
    console.log(this.state.venues)
  }
}

如果我在控制台记录 getVenues 方法中的返回值，则会显示响应。尽管在 componentDidMount() 中，场所的状态是一个空数组。为什么会发生这种情况，我该如何解决？

标签： javascriptreactjs

解决方案

你需要在setState里面then：

getVenues = async () => {
    let res = [];
    await Axios.get("/venues",{
      headers:{
        "Content-Type":"application/json",
      }
    })
    .then((response) =>{
      res = response.data
      console.log(res)
      this.setState({venues: response.data})
    })

    .catch(err => console.log(err))
    return res;
  }

由于方法的关键字，您实际上返回的venues是componentDidMount一个承诺。asyncgetVenues

推荐阅读