reactjs - Hook 状态的更改未更新模板文字中的值

Question

我是 Hooks 新手，是在学习 React 类(class)后才来的，所以有点迷失。在下面的代码中，我将 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只在狗变量是labrador的组件挂载上运行。因此，在您更改按钮上的狗之后，单击不会从服务器获取任何新内容。更改您的代码如下:

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