Aquí estoy pasando el estado a través de accesorios a través de un componente intermediario. El componente intermedio tiene un controlador (onIntermediatePropsHandler) tiene algo de lógica (const formatedAmount = addedAmount += 10;) que se ejecuta en los datos que se pasan. Parecería que la lógica solo se ejecuta una vez. ¿Por qué es esto?
const Parent = () => { const onParentPropsHandler = amount => { console.log(amount) } return ( <div> <Intermediate IntermediateToParent={onParentPropsHandler} /> </div> ) } const Intermediate = (props) => { const onIntermediatePropsHandler = enteredAmount => { const formatedAmount = enteredAmount += 10; props.IntermediateToParent(formatedAmount) } return ( <div> <Child ChildToIntermediate={onIntermediatePropsHandler} /> </div> ) } export const Child = (props) => { const [index, setIndex] = useState(null) const onClickHandler = (index) => { setIndex(index + 1); props.ChildToIntermediate(index); } return ( <div> <button onClick={() => onResetState(index)}>Reset Counter</button> </div> ) }Esto le da al registro de la consola de
No estoy seguro de lo que estás tratando de lograr aquí. Pero en caso de que desee formatear el índice antes de configurar el índice en el estado local de los niños, debe llamar a la función principal antes de configurar el índice, así:
const Intermediate = (props) => { const onIntermediatePropsHandler = (enteredAmount) => { const formatedAmount = (enteredAmount += 10); props.IntermediateToParent(formatedAmount); return formatedAmount // Return the formated Amount to the children }; return ( <div> <Child ChildToIntermediate={onIntermediatePropsHandler} /> </div> ); }; export const Child = (props) => { const [index, setIndex] = useState(null); const onClickHandler = (index) => { const updatedIndex = props.ChildToIntermediate(index); // You get the updated index setIndex(updatedIndex + 1); }; return ( <div> <button onClick={() => onClickHandler(index)}> Counter: {index}</button> </div> ); };No estoy seguro de lo que estás tratando de hacer. Pero si desea formatear el índice actualizado, debe llamar a la función principal en la función useEffect , porque el índice se establece de forma asíncrona, por lo que obtiene el estado anterior. Así que el estado de su hijo se verá así:
useEffect(() => { props.ChildToIntermediate(index); // Updated index value }); const onClickHandler = (index) => { setIndex(index + 1); }De esta manera, después de actualizar su índice, llamará a la función principal, de acuerdo con el índice actualizado (y ya no con el estado anterior)