Estoy usando una matriz de componentes que están interesados según varias condiciones, es decir, el orden y la cantidad de elementos en la matriz son dinámicos, como se muestra a continuación:
useEffect(() => { const comp = []; // if(condition1===true){ comp.push(<MyComp onChange={onValueChange} />); // } // if(condition2===true){ comp.push(<YourComp onChange={onValueChange} />); // } // if(condition3===true){ comp.push(<HisComp onChange={onValueChange} />); // } setComponents(comp); }, []); Para cada uno de los componentes de la matriz, podría haber algún tipo de control de entrada como texto de entrada, número de entrada, área de texto, chips, radio, casilla de verificación, etc.
Entonces, hay un evento onChange vinculado a cada uno de estos componentes.
Estoy usando una función onValueChange común que se pasa como devolución de llamada a estos componentes. En onValueChange necesito 2 cosas:
const onValueChange = (val) => { console.log("onChange Valled", val, "activeIndex==", activeIndex); };Pero aquí no puedo obtener el valor actualizado en activeIndex, siempre da cero sin importar en qué paso activo me encuentre.
Sandbox DEMO
Intente usar useCallback con matriz de dependencia. También intente evitar el almacenamiento de componentes en el estado: el consejo de la oficina: ¿qué no debería ir en el estado?
const onValueChange = useCallback((val) => { console.log("onChange Valled", val, "activeIndex==", activeIndex); },[activeIndex];Para renderizar, intente algo como a continuación.
condition1===true && <MyComp onChange={onValueChange} /> o cree una función que devuelva el componente, por ejemplo: getComponent(condition) y utilícela en render/return. Asegúrese de envolver getComponent en useCallback con una matriz de dependencia vacía []
usarEfecto(() => {
setComponents((valores anteriores)=>{
// si desea agregar el estado anterior
const comp = [...valoresanteriores];
// si desea sobrescribir el estado anterior
constante comp = [];
si (condición1===verdadero){
comp.push();
}
si (condición2===verdadero){
comp.push();
}
si (condición3===verdadero){
comp.push();
}
volver borrador;
});
}, []);