Básicamente, antes de cargar una imagen en Firebase, intento controlar la entrada como:
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); };que llamo al método anterior desde /lib/controlThumbnail.js a:
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 }; } }); }; ...entonces, esto ahora funciona correctamente, pero me pregunto si esta es la buena manera de hacerlo. ¿O debería poner el método de control dentro del componente y nunca dar setState como parámetro?
es subjetivo Personalmente, creo que la función controlThumbnail no es el lugar adecuado para hacer esa abstracción. Aquí, en realidad solo está proporcionando validación. No necesita darle la responsabilidad de validar Y establecer algún estado.
Puede crear una función de validación pura y simplemente usar el retorno de esto para actualizar el estado en su componente de 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 }; }); } }