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>
            );
        },
    }