是否可以在另一个回调中调用useCallback

如何解决是否可以在另一个回调中调用useCallback

在组件A中：

 const getonClick = useCallback(
    (rec: GenericRec): (() => void) => () => {
      setSelectedRecord(rec);
    },[],);

在A的子B子中：

const openRecord = useCallback(
    (row: Row<Record>) => () => {
      getonClick({ id: row.original.id,name: row.original.name });
    },[getonClick],);

getonClick不被调用

解决方法

在两个useCallback调用中，您都有一个额外的功能层。与useMemo不同，useCallback直接接受应记住的回调，而不是接受构建回调的函数。

所以：

const getOnClick = useCallback(
    (rec: GenericRec): (() => void) => {
//                                     ^−−−− no () => here
        console.log("getOnClick");
        setSelectedRecord(rec);
    },[],);

const openRecord = useCallback(
    (row: Row<Record>) =>
//                       ^−−−− no () => here
        getOnClick({ id: row.original.id,name: row.original.name }),[getOnClick],);

实时示例（带有TypeScript类型注释的注释）：

const { useState,useCallback } = React;

function Example() {
    const [selectedRecord,setSelectedRecord] = useState(null);
    const getOnClick = useCallback(
        (rec/*: GenericRec*/)/*: (() => void)*/ => {
            console.log("getOnClick");
            setSelectedRecord(rec);
        },[]/*,*/
    );

    const openRecord = useCallback(
        (row/*: Row<Record>*/) =>
    //                         ^−−−− no () => here
            getOnClick({ id: row.original.id,[getOnClick]/*,*/
    );

    const addRecord =() => {
        console.log("addRecord");
        openRecord({
            original: {
                id: 1,name: "The record"
            }
        });
    };

    return (
        <div>
            <input type="button" value="Click Me" onClick={addRecord} disabled={!!selectedRecord} />
            {selectedRecord && <span>Selected record: "{selectedRecord.name}" ({selectedRecord.id})</span>}
            {!selectedRecord && <em>No record selected</em>}
        </div>
    );
}

ReactDOM.render(<Example/>,document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>