reactjs - 使用状态 setter 作为带有反应钩子(Hook)的 Prop

Question

我试图了解从 useState 传递 setter 是否存在问题。

在此示例中，我的子组件同时接收状态和 setter 来更改它。

export const Search = () => {
  const [keywords, setKeywords] = useState('');

  return (
    <Fragment>
      <KeywordFilter
        keywords={keywords}
        setKeywords={setKeywords}
      />
    </Fragment>
  );
};

然后在 child 身上我有类似的东西:

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 本身就可以了。