Tengo una pregunta. Estoy haciendo la aplicación React. La cuestión es que en useEffect recorro seis elementos cada vez que solo cambia una cosa. ¿Cómo resolverlo para cambiar solo una variable que se cambió en la función de reducción que no se repite en 6 elementos cuando solo se cambió uno, o está bien mantener un código como este?
const initialReducerValue = { name: { val: '', isValid: false, }, lastName: { vaL: '', isValid: false }, phoneNumber: { val: '', isValid: false }, city: { val: '', isValid: false, }, street: { val: '', isValid: false }, postal: { val: '', isValid: false }, } const OrderForm = () => { const orderReducer = (state, action) => { if (action.type === 'HANDLE TEXT CHANGE') { return { ...state, [action.field]: { val: action.payload, isValid: true } } } } const [formState, formDispatch] = useReducer(orderReducer, initialReducerValue) const [formIsValid, setFormIsValid] = useState(false) const changeTextHandler = (e) => { formDispatch({ type: 'HANDLE TEXT CHANGE', field: e.target.name, payload: e.target.value }) } useEffect(() => { const validationArray = [] for (const key of Object.keys(formState)) { validationArray.push(formState[key].isValid) } const isTrue = validationArray.every(item => item) setFormIsValid(isTrue) }, [formState])este codigo
const validationArray = [] for (const key of Object.keys(formState)) { validationArray.push(formState[key].isValid) } const isTrue = validationArray.every(item => item)es equivalente a
const isTrue = Object.values(formState).every(item => item.isValid);Esto aún itera sobre todos los elementos cuando solo se cambió uno, pero con una matriz temporal menos.
Para seis elementos, no gastaría tiempo tratando de optimizar más este código, pero esa es su elección.