Http получить запрос, используя ax ios в реакции. js - PullRequest
Новая
       99

Http получить запрос, используя ax ios в реакции. js

0 голосов
/ 04 мая 2020

Temp. js

import React, {useEffect, useState} from 'react';
import axios from 'axios'
const Temp=()=> {
    const APP_ID='8232312'
    const APP_KEY='6a4e7c08d71463dada3b481f85a9b16'
    const [receipe, setReceipe] = useState([])


    useEffect(() => {
        console.log("use effect")
axios.get(`https://api.edamam.com/search?q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}`)
        .then(response => {
          console.log('get receipe by promise', response)
          console.log("use state variable receipes")
          setReceipe(response.data)
          console.log("after use state receipe = " , receipe)
        })
        .catch(e => console.log(e))


    });

    return (

        <div>

        </div>
    )
}

export default Temp

Приложение. js

import React from 'react';
import './App.css';

import Temp from './Component/Temp';

const App = ()=> {

  return (
<div className='App'> 
<Temp></Temp>
</div>
  );
}

export default App;

Консольный выход - 

use effect
Temp.js:13 get receipe by promise {data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …}
Temp.js:14 use state variable receipes
Temp.js:16 after use state receipe =  []
Temp.js:10 use effect
Temp.js:13 get receipe by promise {data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …}
Temp.js:14 use state variable receipes
Temp.js:16 after use state receipe =  {q: "chicken", from: 0, to: 10, more: true, count: 168106, …}
Temp.js:10 use effect
Temp.js:13 get receipe by promise {data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …}
Temp.js:14 use state variable receipes
Temp.js:16 after use state receipe =  {q: "chicken", from: 0, to: 10, more: true, count: 168106, …}
Temp.js:10 use effect
Temp.js:13 get receipe by promise {data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …}
Temp.js:14 use state variable receipes
Temp.js:16 after use state receipe =  {q: "chicken", from: 0, to: 10, more: true, count: 168106, …}

на консольном выходе, для первый раз рецепт устанавливается пустым, а второй - с ответом на запрос HTTP. Но мне нужно setReceipe (response.data), чтобы установить receipe для response.data в первый раз, а также

Ответы [ 3 ]

1 голос
/ 04 мая 2020

Короткий ответ

Вы не можете и не должны даже пытаться. При первой загрузке у вас даже нет данных для заполнения вашего состояния. Следовательно, вы не можете этого сделать.

Длинный ответ

HTTP Сетевые вызовы (axios GET/POST/PUT/DELETE или любой другой сетевой вызов с использованием любой другой библиотеки) являются асинхронными. Когда вы загружаете свой компонент (приложение), вызовы XHR помещаются в очередь для выполнения. В течение этого времени ваш пользовательский интерфейс рендерится, и ваш state будет инициализирован по умолчанию После успешного завершения вызова XHR вы получаете данные с сервера. Теперь вы можете обновить свое состояние с помощью response.data.

Кроме того, не беспокойтесь об этом поведении. Это характерно для любого приложения практически.

Надеюсь, это поможет.

0 голосов
/ 04 мая 2020

Пожалуйста, проверьте приведенный ниже пример, как вы можете вызвать API с GET-запросом, используя ax ios: 

import React, {useEffect, useState} from "react";
import axios from 'axios';

function PostListPage() {
    const [posts, setPost] = useState([]);
    let signal = axios.CancelToken.source();

    useEffect(() => {
        let isSubscribed = true;
        axios.get('https://jsonplaceholder.typicode.com/posts', {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
            }).catch(err => {
            console.log(err);
        });
        return function cleanup() {
            isSubscribed = false;
            signal.cancel('Api is being canceled');
        }
    }, []);

    return (
        <React.Fragment>
            <ul>
                {
                    posts.map(post => <li key={post.id}>{post.title}</li>)
                }
            </ul>
        </React.Fragment>
    );
}
export default PostListPage;
0 голосов
/ 04 мая 2020

Это невозможно

Рендеринг и рендеринг происходят один за другим. Получение данных требует времени, поэтому ваши исходные данные будут пустыми.

Быстрое исправление

Чтобы остановить этот разрыв, убедитесь, что у вас есть значение по умолчанию, как вы уже have. 

const [receipe, setReceipe] = useState([])
...
receipe.map((item) => <p>{item.someText}</p>)

Если по умолчанию для рецепта установлено значение [] или если оно заполнено данными [{someText: 'text'}], карта данных не будет нарушена. Вы также можете не отображать компонент, если нет данных 

return recipe ? <Component /> : null
...