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