useEffect或useCallback中的setState，依赖关系问题

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]);

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

这段代码和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]);
};