在 React 中接受 setState 作为函数参数是不好的做法吗？

Question

基本上，在将图像上传到 Firebase 之前，我会尝试将输入控制为：

export const controlThumbnail = (selectedThumbnail, setThumbnailError) => {
  if (!selectedThumbnail) {
    setThumbnailError('Please select a thumbnail!');

    return;
  }

  if (!selectedThumbnail.type.includes('image')) {
    setThumbnailError('Please select an image!');

    return;
  }

  if (selectedThumbnail.size > 1000000) {
    setThumbnailError('Image size must be less than 1MB!');

    return;
  }

  setThumbnailError(null);
};

我把上面的方法从 /lib/controlThumbnail.js 调用到：

import { controlThumbnail } from '../../lib/controlThumbnail';
    
const Signup = () => {
  const [userInfo, setUserInfo] = useState({
    name: '',
    email: '',
    password: '',
    thumbnail: null
  });
  const [thumbnailError, setThumbnailError] = useState(null);


  const userInputHandler = (e) => {
    setUserInfo((prevUserInfo) => {
      if (e.target.name === 'thumbnail') {
        const thumbnail = e.target.files[0];
        controlThumbnail(thumbnail, setThumbnailError);

        return { ...prevUserInfo, thumbnail };
      } else {
        return { ...prevUserInfo, [e.target.name]: e.target.value };
      }
    });
  };
...

所以，这现在可以正常工作，但我想知道这是否是这样做的好方法？还是应该把控制方法放在组件里面，不给 setState 作为参数？

Answer 1

这是主观的。就个人而言，我认为controlThumbnail 函数不是进行该抽象的正确位置。在这里，您实际上只是提供验证。您无需赋予它验证和设置某些状态的责任。

您可以创建一个纯验证函数，并使用它的返回来更新您的Signup 组件中的状态：

const validateThumbnail = (thumbnail) => {
  if (!thumbnail) {
    return 'Please select a thumbnail!';
  }

  if (!thumbnail.type.includes('image')) {
    return 'Please select an image!'
  }

  if (thumbnail.size > 1000000) {
    return 'Image size must be less than 1MB!'
  }

  return null
}

const Signup = () => {
  const [userInfo, setUserInfo] = useState({
    name: '',
    email: '',
    password: '',
    thumbnail: null
  });
  const [thumbnailError, setThumbnailError] = useState(null);


  const userInputHandler = (e) => {
    setUserInfo((prevUserInfo) => {
      if (e.target.name === 'thumbnail') {
        const thumbnail = e.target.files[0];
        setThumbnailError(validateThumbnail(thumbnail));
        return { ...prevUserInfo, thumbnail };
      }
      return { ...prevUserInfo, [e.target.name]: e.target.value };
    });
  }
}