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

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

1 个答案: