Как вызвать асинхронную функцию внутри UseEffect () в React? - PullRequest
Новая
       26

Как вызвать асинхронную функцию внутри UseEffect () в React?

1 голос
/ 01 июля 2019

Я хотел бы вызвать асинхронную функцию и получить результат для моего UseEffect.

Примеры API выборки, которые я нашел в Интернете, напрямую создаются в функции useEffect.Если мой URL меняется, я должен исправить все мои выборки.

Когда я попробовал, я получил сообщение об ошибке.

Это мой код. 


    async function getData(userId) {
        const data = await axios.get(`http://url/api/data/${userId}`)
            .then(promise => {
                return promise.data;
            })
            .catch(e => {
                console.error(e);
            })
            return data;
    }


    function blabla() {
        const [data, setData] = useState(null);

        useEffect(async () => {
            setData(getData(1))
        }, []);

        return (
            <div>
                this is the {data["name"]}
            </div>
        );
    }

index.js: 1375 Предупреждение: функция эффекта не должна возвращать ничего, кроме функции, которая используется для очистки.Похоже, вы написали useEffect (async () => ...) или вернули Обещание.Вместо этого напишите асинхронную функцию внутри вашего эффекта и немедленно вызовите ее: 

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

Ответы [ 2 ]

1 голос
/ 01 июля 2019

Было бы лучше, если бы вы сделали то, что предлагает предупреждение - вызовите асинхронную функцию внутри эффекта. 

function blabla() {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get(`http://url/api/data/1`)
         .then(promise => {
            setData(promise.data);
         })
         .catch(e => {
            console.error(e);
         })
    }, []);

    return (
        <div>
            this is the {data["name"]}
        </div>
    );
}
0 голосов
/ 01 июля 2019

Создайте асинхронную функцию внутри вашего эффекта, которая ждет результата getData(1), затем вызывает setData(): 

useEffect(() => {
  const fetchData = async () => {
     const data = await getData(1);
     setData(data);
  }

  fetchData();
}, []);
...