为什么我的 axios 调用即使在解决之后仍返回 undefined？

Question

我目前正在使用函数来预定义我所有的 axios 调用，例如：

export const getClients = () => {
    axios.get("/client/")
        .then(response=>{
            return response;
        })
        .catch(error=>{
            return error;
        });
    };

现在，我想在 componentDidMount 中的基于类的组件中调用它，如下所示：

  componentDidMount(){
        this.setState({
            clients: getClients()
        });
  }

我似乎无法弄清楚为什么当我在componentDidMount 末尾尝试console.log(this.state.clients) 时出现未定义的错误。我是 React 的新手，据我了解，axios 调用函数中的 then 应该解决承诺并从 API 调用返回实际响应，所以当我调用 getClients() 时，clients 状态应该成为回应。

我做错了什么？

Answer 1

 componentDidMount(){
       fetchClients();    
  }

  const fetchClients = () => {
    getClients().then( (response)=> {
      // handle success
             this.setState({clients:response});

    });
  };

Answer 2

好的，这里有一些东西需要清除：-

1. 您需要像这样更改getClients：-

export const getClients = () => {
    return axios.get("/client/")
        .then(response=>{
            return response;
        })
        .catch(error=>{
            return error;
        });
    };

为什么？ 因为您从 then 的回调中返回的值隐式包装在 Promise 中，并且必须像在 function sum(a,b) {return a+b} 之类的函数中一样返回以供使用

1. componentDidMount 会变成这样：-

componentDidMount(){
       const fetchClients = async () => {
            const clients = await getClients();
             this.setState({clients});
         }
       fetchClients();    
  }

为什么？ 如果您想以声明方式使用getClients 而不是.then().then() 承诺链，您将首先将其包装在async 函数中，然后在getClients() 上调用await（请记住此函数返回Promise ) 然后在该异步函数中设置状态。

1. 即使您在componentDidMount 内fetchClients() 之后console.log 处于clients 状态，您也可能看不到设置的值，因为setState 是异步工作的。所以千万不要在设置之后就依赖你所在州的console.log。