如何通过按钮触发React的useEffect()钩子？

为什么当前代码不生效？ #

你定义的generate是普通let变量，React不会追踪普通变量的变化。即便在newUser里翻转它的值，React也感知不到这个改动，自然不会触发依赖数组包含generate的useEffect回调。

两种可行的解决方法 #

方法1：将generate改为React状态（符合React核心机制） #

虽然你觉得只是简单切换，但React只有通过状态变量才能追踪变化、触发组件重渲染和useEffect的依赖检查。修改如下：

import { useEffect, useState } from "react";

const Async = () => {
    const [generate, setGenerate] = useState(false); // 改为React状态
    const [user, setUser] = useState({name: ''});

    useEffect(() => {
        fetch('https://randomuser.me/api/?results=1')
        .then(response => response.json())
        .then(data => setUser({...user, name: data.results[0].name.first}))
        .catch(error => console.error(error));
    }, [generate]);
    
    function newUser() {
        setGenerate(prev => !prev); // 通过状态更新函数翻转值
    }

    return <>
        <button onClick={newUser}>Generate user</button>
        <div>User {user.name}</div>
    </>;
};

方法2：提取请求逻辑为独立函数，点击时直接调用（更简洁） #

如果觉得额外状态没必要，可以把获取用户的逻辑抽成单独函数，点击按钮时直接调用，完全不需要依赖useEffect：

import { useEffect, useState } from "react";

const Async = () => {
    const [user, setUser] = useState({name: ''});

    // 提取获取用户的独立函数
    const fetchUser = () => {
        fetch('https://randomuser.me/api/?results=1')
        .then(response => response.json())
        .then(data => setUser({...user, name: data.results[0].name.first}))
        .catch(error => console.error(error));
    };

    // 页面初始化时调用一次
    useEffect(() => {
        fetchUser();
    }, []);
    
    function newUser() {
        fetchUser(); // 点击按钮直接触发请求
    }

    return <>
        <button onClick={newUser}>Generate user</button>
        <div>User {user.name}</div>
    </>;
};

补充说明 #

第二种方法更直接，既省去了额外的状态变量，又能同时满足页面加载初始化和点击获取新用户的需求，推荐优先使用这种写法。

内容的提问来源于stack exchange，提问作者Oli