reactjs - 钩子(Hook)状态的变化不更新模板文字中的值

Question

我是钩子(Hook)的新手，在学习了对类的 react 之后才来，所以有点迷茫。在下面的代码中，我将 setDog 更改为 Husky，然后它应该告诉 API 调用搜索并获取我的哈士奇图片。但是，尽管狗发生了变化，但它并没有发生。谁能看到我哪里出错了？

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]);