在不创建无限重新渲染的情况下解决 ESLint 详尽问题

Question

所以我最近添加了 ESLint，我对 hooks 有点陌生。但是这个 useEffect 钩子有问题，因为 ESLint 要我发送 values，我在 setValues 中使用它，但是如果我发送值，我会陷入无限循环，虽然如果我不这样做，但我会收到此警告，我认为必须有一种方法可以在不禁用它的情况下解决这个问题？

useEffect(() => {
    const initCategories = () => {
        getCategories().then((data) => {
            if (data.error) {
                setValues({ ...values, error: data.error });
            } else {
                const categoryOptions = createOptions(data);
                setCategories(categoryOptions);
            }
        });
    };

    const initTags = () => {
        getTags().then((data) => {
            if (data.error) {
                setValues({ ...values, error: data.error });
            } else {
                const tagOptions = createOptions(data);
                setTags(tagOptions);
            }
        });
    };

    const formData = new FormData();

    if (body) {
        formData.set('body', body);
    }

    setValues({ ...values, formData });

    initCategories();
    initTags();
}, [body, values]);

因为我真的不想让它在每次 values 更改时都重新运行

Answer 1

您可以在设置状态时使用functional update。

setValues(prev => ({...prev, error: data.error}))

因此，在这种情况下，linter 不会警告您，您可以更新您的状态。实际上，无论有无 linter，如果您使用的是当前状态，这应该是您更新状态时的方式。

在不创建无限重新渲染的情况下解决 ESLint 详尽问题

Solve ESLint exhaustive without creating infinite re-renders

reactjs

eslint

react-hooks