setState inside useEffect or useCallback，依赖问题

Question

我正在尝试从我的代码中删除控制台警告，但我对如何解决此依赖性问题感到困惑。我有一个 useEffect 挂钩，它调用一个方法 removeMessage，它是在我的组件中定义的。我收到一条警告，指出这应该在 useEffect 依赖项数组中，但如果我这样做，我会创建一个无限循环，因为当组件重新呈现时会重新创建函数引用。

const Component = () => {
    const [list, setList] = useState();

    const removeMessage = (message: string) => {
        const list = list.filter(x => x.message !== message);
        setList(list);
    }

    useEffect(() => {
        ...
        removeMessage("test");
    });

所以我读到我应该使用 useCallback 挂钩，以确保引用不被更改：

const removeMessage = useCallback((message: string) => {
    const list = list.filter(x => x.message !== message);
    setList(list);
}, [list]);

但是，除非我提供我的 list 作为该挂钩的依赖项，否则我会收到类似的警告。但如果我这样做，我会创建另一个无限循环。

此代码和 useEffect 的用法可能是不好的做法，但我不知道如何解决它，因为我的方法 removeMessage 取决于状态进行过滤。

谢谢。

Answer 1

我认为这应该可行（使用 setState 函数变体）。这样你就不会依赖列表（并且在边缘情况下它也更正确）

const Component = () => {
  const [list, setList] = useState<Array<{ message: string }>>([]);

  const removeMessage = useCallback((message: string) => {
    setList(prev => prev.filter(x => x.message !== message));
  }, []);

  useEffect(() => {
    removeMessage('test');
  }, [removeMessage]);
};

setState inside useEffect or useCallback，依赖问题

setState inside useEffect or useCallback, dependency issue

setstate

typescript

reactjs

react-hooks

use-effect