• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

248
Views
¿Es una mala práctica aceptar setState como un parámetro de función en React?

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?

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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 }; }); } }
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error