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回调函数还是可以通过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的角度来看的函数值。通话时间可以是任何时间，只要相关组件处于活动状态即可。

使用状态设置器作为带有React挂钩的道具

2 个答案: