изменение состояния подключения не обновляет значение в литералах шаблона

Question

Я новичок в зацепках и прихожу после того, как учусь реагировать с классами, поэтому немного растерялся. в приведенном ниже коде я изменяю setDog на Husky, который затем должен сказать API-вызову выполнить поиск и вызвать меня pi c из лайки. Но это не происходит, несмотря на изменения в собаке. Кто-нибудь может увидеть, где я иду не так?

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

export default function ApiCalls() {
    const [ data, setData ] = useState();
    const [ dog, setDog ] = useState('labrador');

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(`https://dog.ceo/api/breed/${dog}/images`);
            setData(result.data.message[0]);
        };
        fetchData();
    }, []);

    const Husky = () => {
        setDog('husky');
    };

    return (
        <div>
            <img alt={''} src={data} />
            <button onClick={Husky}>Retrieve Husky</button>
        </div>
    );
}

Answer 1

Ваш список чувствительности useEffect равен [], поэтому этот useEffect просто запускается при монтировании компонента, а переменная dog равна labrador. Таким образом, после того, как вы поменяете собаку на нажатие кнопки, ничего не будет получено с сервера. Измените свой код следующим образом:

useEffect(() => {
        const fetchData = async () => {
            const result = await axios(`https://dog.ceo/api/breed/${dog}/images`);
            setData(result.data.message[0]);
        };
        fetchData();
  }, [dog]);

Answer 2

useEffect запускается только один раз, поскольку массив зависимостей [] пуст. Поэтому, когда вы меняете dog, оно не сработает. Чтобы исправить это, добавьте dog для использования зависимости эффекта

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

export default function ApiCalls() {
    const [ data, setData ] = useState();
    const [ dog, setDog ] = useState('labrador');

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(`https://dog.ceo/api/breed/${dog}/images`);
            setData(result.data.message[0]);
        };
        fetchData();
    }, [dog]);

    const Husky = () => {
        setDog('husky');
    };

    return (
        <div>
            <img alt={''} src={data} />
            <button onClick={Husky}>Retrieve Husky</button>
        </div>
    );
}

Answer 3

Сделай это

const fetchData = async (input) => {
  const result = await axios(`https://dog.ceo/api/breed/${input}/images`);
  setData(result.data.message[0]);
};
useEffect(() => fetchData(dog), []);