为什么一个 axios 解决方案有效，而另一个无效？

Question

我正在尝试从 API 获取信息作为练习。为此，我实施了 2 个解决方案，但只有第一个有效。

第一个（工作解决方案）：

class Home extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            dogs: {}
        }
    }

    componentDidMount() {
        get(< API URL here>)
            .then(items => {
                this.setState({ dogs: items.data.message })
            })
            .catch(err => {
                console.log(err);
            })
    }

    render() {
        const { dogs } = this.state;

        return (
            <div>
                <h1>Dog list</h1><br />
                <p>The following is a list of dogs from the dog API provided:</p>
                <div>
                    {Object.entries(dogs).map(([key, value]) => <p>{key}: {value}</p>)}
                </div>
            </div>
        )
    }
}

export default Home;

第二（不工作）：

const Home = () => {
    const [dogs, setDogs] = useState({});

    useEffect(() => {
        get(< API URL here >)
            .then(items => {
                setDogs(items.data.message);
                console.log(items.data.message);
            })
            .catch(err => {
                console.log(err);
            })
    }, [])

    return (
        <div>
            <h1>Home</h1>
            <div>
                {Object.entries(dogs).map(([key, value]) => {
                    <div>
                        <p>{key}</p>
                    </div>
                })}
            </div>
        </div>
    );
};

export default Home;

第二次我做错了什么？我试图用这个例子来更好地理解 useEffect 钩子。