React Hook useMemo 缺少依赖项：'handleClearData'

Question

这是我下面的代码

const Search = ({ results }) => {
const dispatch = useDispatch();

const handleClearData = () => {
    dispatch(clearData());
};

const columns = useMemo(
    () => [
        {
            Header: 'G35 Number',
            accessor: 'g35Number',
            Cell: props => {
                const { original } = props.row;
                return (
                    <React.Fragment>
                        <Link data-tip data-for={`link-${original.sNumber}`}
                            to={{ pathname: `/search/${original.sNumber}`, state: { s: props.row.original } }} onClick={handleClearData}>
                            {original.g35Number}
                        </Link>
                    </React.Fragment>
                );
            },
        },
        {
            Header: 'Regn Number',
            accessor: 'regNumber',
        },
        {
            Header: 'File',
            accessor: 'file',
        },
        {
            Header: 'Details',
            accessor: 'details',
        }
    ],
    []
);

const data = useMemo(() => results, [results]); // eslint-disable-line react-hooks/exhaustive-deps

const renderTable = () => {
    return (
        <ReactTable columns={columns} data={data} />
    );
}

return (
    <div className="card py-3 px-4">
        {
            results?.length ?
                renderTable() :
                <div>No results.</div>
        }
    </div>
);
}export default Search;

我收到以下警告：

React Hook useMemo has a missing dependency: 'handleClearData'. Either include it or remove the dependency array

我尝试在 useMemo 的依赖项数组中添加 handleClearData，这给了我以下警告：

 The 'handleClearData' function makes the dependencies of useMemo Hook change on every render. Move it inside the useMemo callback. Alternatively, wrap the 'handleClearData' definition into its own useCallback() Hook

当它说我需要将它包装在它自己的 useCallback() 钩子中时，我不明白这意味着什么。

任何人都可以帮助我我所缺少的吗？ 如果我只想第一次加载它，我不确定是否要在依赖项数组中添加任何内容（如果它在 useEffect 中以相同的方式工作）。

Answer 1

我能够通过移动 useMemo 中的函数来解决警告，如下所示：

{
        Header: 'G35 Number',
        accessor: 'g35Number',
        Cell: props => {
            const { original } = props.row;
            const dispatch = useDispatch();

            const handleClearData = () => {
              dispatch(clearData());
            };
            return (
                <React.Fragment>
                    <Link data-tip data-for={`link-${original.sNumber}`}
                        to={{ pathname: `/search/${original.sNumber}`, state: { s: props.row.original } }} onClick={handleClearData}>
                        {original.g35Number}
                    </Link>
                </React.Fragment>
            );
        },
    }