React：props 中傳遞的函數未定義

Question

我有一個帶鈎子的功能組件，我試圖將更新函數傳遞給另一個組件，但它始終未定義。 這是一個最小的例子：

const A = () => {
    const [value, setValue] = React.useState(null);

    return (
        <div>
            <B value={value} setValue={setValue}/>
        </div>
    )
};

const B = (value: any, setValue: any) => {
    return (
        <Input value={value} onChange={e => setValue(e.target.value)}/>
    )
};

我見過涉及綁定或數組函數的建議，但都不起作用。 如何正確傳遞此功能？ 轉換為類組件是可能的，但在這種情況下，我應該在哪里定義鈎子或使用什么來代替？ （我真正需要的是一個有狀態的對象，我可以從其他組件訪問和更改它）。

提前致謝。

Answer 1

在組件B您正在從 props 解構value和setValue ，但是您缺少大括號{}您需要像這樣添加大括號。

           // add                    // add
const B = ({value: any, setValue: any}) => {
    return (
        <Input value={value} onChange={e => setValue(e.target.value)}/>
    )
};

Answer 2

因為父組件使用與{...prams}相同的 param props將其傳遞給子組件。 讓我們試試：

const B = ({value: any, setValue: any}) => {
    return (
        <Input value={value} onChange={e => setValue(e.target.value)}/>
    )
};