javascript - 导出/导入 useState 更改实用程序功能？

Question

我有一个像这样的小上传处理程序：

const handleUploadPhoto = filename => {
  setHasImage('has-image');
  setPostButtonState('');
  onAddedPhoto(filename);
  setPostImageFilename(filename);
};

我到处使用它，我很想从 helpers.js 文件中导出它并在需要的地方导入它，但考虑到受它影响的 useState 变量何时需要保留在父级，而不是导入的助手。

const [postImageId, setPostImageId] = useState(null);
const [postImageFilename, setPostImageFilename] = useState(null);
const [postImageUrl, setPostImageUrl] = useState(null);

这种功能不适合导出/导入吗？

Answer 1

一种选择是制作自己的钩子来定义所有状态设置器并将onAddedPhoto用作参数：

const useImageStuff = (onAddedPhoto) => {
  const [hasImage, setHasImage] = useState('');
  const [postButtonState, setPostButtonState] = useState('');
  const [postImageFilename, setPostImageFilename] = useState('');
  const handleUploadPhoto = () => {
    setHasImage('has-image');
    setPostButtonState('');
    onAddedPhoto(filename);
    setPostImageFilename(filename);
  };
  return {
    hasImage,
    setHasImage,
    postButtonState,
    setPostButtonState,
    postImageFilename,
    setPostImageFilename,
    handleUploadPhoto,
  };

然后在所有地方使用它：

const SomeComponent = () => {
  const onAddedPhoto = () => {
    // ...
  };
  const {
    hasImage,
    setHasImage,
    postButtonState,
    setPostButtonState,
    postImageFilename,
    setPostImageFilename,
    handleUploadPhoto,
  } = useImageStuff(onAddedPhoto);
  // ...