Tengo algunos campos de entrada que deben establecerse antes de llamar a onCompleteOrder . Almaceno errores usando useState , necesito que el programa siga buscando qué campos no están configurados y, por lo tanto, mantenga el error dentro del estado de errors . Si el estado de errors no está vacío, bloquee la llamada a esa función. El problema es que el estado se actualiza después de hacer clic en el botón, sé que esto debe manejarse usando el useEffect , ¿cómo lo hago correctamente?

 const OrderModal = (props) => { const [errors, setErrors] = React.useState([]) const [selectedFile, setSelectedFile] = React.useState(oldFile) const [startDate, setStartDate] = React.useState(new Date()); const [endDate, setEndDate] = React.useState(null); const { isAuthenticated, user } = useAuth0(); React.useEffect(() => { let currentErrors = errors.map(err => err.type) let newErrors = [] if (!isAuthenticated && currentErrors.includes("authentication")) newErrors.push({ type: "authentication", message: "You must log in before creating an order!." }) if (!selectedFile && currentErrors.includes("image")) newErrors.push({ type: "image", message: "Please select an image." }) if (!startDate && currentErrors.includes("startDate")) newErrors.push({ type: "startDate", message: "Please select a start date." }) if (!endDate && currentErrors.includes("endDate")) newErrors.push({ type: "endDate", message: "Please select an end date." }) setErrors(newErrors) }, [isAuthenticated, selectedFile, startDate, endDate]) } const renderInputErrors = () => { return ( <> {errors.length > 0 && errors.map(e => { return ( <CAlert color="danger" dismissible> {e} </CAlert> ) }) } </> ) } const onCompleteOrder = () => { if (errors.length > 0) return // complete the order if all fields are set. }