使用状态设置器作为带有反应钩子的道具

Question

我试图了解从useState传递setter是否是一个问题。

在此示例中，我的子组件接收状态和资源库以更改它。

export const Search = () => {
const [keywords, setKeywords] = useState('');
return (
<Fragment>
<KeywordFilter
keywords={keywords}
setKeywords={setKeywords}
/>
</Fragment>
);
};

然后在孩子身上我有这样的东西：

export const KeywordFilter: ({ keywords, setKeywords }) => {
const handleSearch = (newKeywords) => {
setKeywords(newKeywords)
};
return (
<div>
<span>{keywords}</span>
<input value={keywords} onChange={handleSearch} />
</div>
);
};

我的问题是，我应该在父级上有一个回调函数来设置关键字，还是可以传递 setKeywords 并从子级调用它？

Answer 1

没有必要创建一个加法函数来将值转发到 setKeywords，除非你想事先对这些值做一些事情。例如，也许您偏执于子组件可能会向您发送错误数据，您可以执行以下操作：

const [keywords, setKeywords] = useState('');
const gatedSetKeywords = useCallback((value) => {
if (typeof value !== 'string') {
console.error('Alex, you wrote another bug!');
return;
}
setKeywords(value);
}, []);
// ...
<KeywordFilter
keywords={keywords}
setKeywords={gatedSetKeywords}
/>

但大多数时候你不需要做这样的事情，所以传递setKeywords 本身是可以的。

Answer 2

为什么不呢？

状态集只是 prop 视图中的函数值。只要相关组件处于活动状态，调用时间就可以是任何时间。