仅在使用挂钩进行状态更改时更新反应状态

Question

我正在使用带有钩子的react，这就是我的组件的结构：

const DogsList = () => {
    const dogService = new DogService();
    const [dogs, setDogs] = useState([]);

    useEffect(() => {
        //httpRequest
        dogService.getDogsData().then(response => {
            setDogs(response.data); //populate dog state
        });
    }, []);

    const purgeDogData = () => {
        //httpRequest
        dogService.deleteDogs().then(response => {
            if (response.status == 202) {
                setDogs([]); //reset dog state
            }
        });
    };

    return (
        <div>
            <Container maxWidth='xl'>
                <Button onClick={purgeDogData} />
                <DogTable dogs={dogs} />
            </Container>
        </div>
    );
};

很酷，我想在单击触发方法purgeDogData的按钮时清除“ dogs”变量的状态。 我知道如果我在useEffect中传递变量而不是空数组，就可以重现componentDidUpdate，如下所示： [狗]

但是使用此解决方案，该组件将始终触发httpRequest获取数据。

我想知道，我该如何解决？ 我想在单击按钮时更新状态，但是没有请求服务来检索数据。