Creé un componente controlado que restringe un campo de entrada a solo 4 números. Estos números se pueden cambiar en cualquier momento y en cualquier momento que el número sea de cuatro dígitos, quiero que el resultado se pase a un componente hermano para que actúe.
Estoy enviando el valor al estado padre y este se vuelve a renderizar y el hermano obtiene el valor. Pero mi componente también se vuelve a renderizar y los campos de entrada pierden el valor.
¿Debería simplemente enviar el valor al padre y dejar que el padre lo vuelva a representar en cada cambio de entrada?
¿O usar Contexto?
Cualquier idea sería genial ya que soy nuevo en React.
const NumberComp = ({setPostcode})=>{ const [ fieldValue, setFieldValue ] = useState('') useEffect(()=>{ if(fieldValue.length == 4){ setPostcode(fieldValue) } }, [fieldValue]) const updateNumber = (e)=>{ const value = e.target.value if(value.length > 4 || isNaN(value)) return setFieldValue(value) } return <input onChange={updateNumber} value={fieldValue} type="text" /> }Si su proyecto es pequeño, eleve el estado y páselo a los componentes hermanos y el componente memoize; de lo contrario, use la API de contexto si desea evitar la perforación de accesorios.
Debe permitir que la nueva representación también se realice en el padre. Una renderización secundaria solo es posible cuando se vuelve a renderizar la primaria. Sin embargo, esto no volverá a renderizar partes sin cambios, ya que React actualiza solo lo que es necesario .
También puede consultar esta pregunta para ayudar a aclarar sus dudas.
También puede intentar usar notas de reacción, pero necesitaría un control preciso para asegurarse de que su componente se actualice cuando se supone que debe hacerlo.