В настоящее время я использую функции для предопределения всех моих вызовов axios, например:

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

Теперь я хочу вызвать это в компоненте на основе классов в componentDidMount следующим образом:

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

Кажется, я не могу понять, почему, когда я пытаюсь console.log(this.state.clients) в конце componentDidMount, я получаю неопределенную ошибку. Я новичок в React и, насколько я понимаю, then в функции вызова axios должен разрешить обещание и вернуть фактический ответ от вызова API, поэтому, когда я вызываю getClients(), { Состояние {X4}} должно быть ответом.

Что я делаю не так?

0
DjangoDev1 16 Фев 2021 в 15:42

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, а затем вызовите await для {{X4} } (помните, что эта функция возвращает Promise), а затем установите состояние внутри этой асинхронной функции.

  1. Даже если вы console.log состояние clients после fetchClients() внутри componentDidMount, вы, вероятно, не увидите установленное значение, потому что setState работает асинхронно. Поэтому никогда не полагайтесь на console.log своего состояния сразу после его установки.
0
Lakshya Thakur 16 Фев 2021 в 12:57
 componentDidMount(){
       fetchClients();    
  }

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

    });
  };
1
Hithesh k 16 Фев 2021 в 13:15
66224538