En mi componente funcional nativo de reacción, el estado se actualiza, pero cuando quiero usar este estado dentro de una función (por ejemplo, para enviar datos a la API), solo usa el estado inicial.
imports... const Component = ({ navigation }) => { const [ids, setIds] = useState([1,2]); useLayoutEffect(() => { navigation.setOptions({ headerRight: () => <HeaderRight onPress={() => console.log(ids); // this logs initial state, ie, [1,2] updateIdsToServerViaAPI(); // and therefore I'm unable to update ids using this method } /> }); }, [navigation]); const updateIdsToServerViaAPI = async () => {} // function that takes updated ids from state. const onPress = async () => { const newIds = [...ids, 3, 4]; setIds(newIds); } const onPressInsideComp = () => { console.log(ids); // here updated ids gets logged. } return ( <View> <Button onPress={onPress} /> {ids.map(id => ( <Text key={id}>{id}</Text> {\* Here you will see 4 texts after pressing button, that means state gets updated*\} )} <Button onPress={onPressInsideComp} /> </View> ); } Parece que este problema ocurre solo cuando se llama a las funciones dentro useLayoutEffect o useEffect pero cuando llamo a onPressInsideComp desde el botón dentro del componente, ¡se registra correctamente!
¡Estoy muy atascado en este extraño problema!
Solo ha proporcionado el accesorio de navigation en la matriz de dependencias de su contenedor useLayoutEffect , por lo que la función no se vuelve a crear si cambia el estado de los ids .
Es posible que desee crear una función diferente, envuelta dentro de un useCallback que obtenga el estado de ids como una dependencia y proporcione esta función en su useLayoutEffect .
const doSomething = useCallback(() => { console.log(ids); updateIdsToServerViaAPI(); }, [ids]) useLayoutEffect(() => { navigation.setOptions({ headerRight: () => <HeaderRight onPress={() => doSomething(ids) } /> }); }, [navigation, ids, doSomething]);En su código, console.log(ids) se resuelve en el momento de la definición de la función, y no en el momento de la ejecución, por lo que toma la referencia que obtiene en la definición const [ids, setIds} = useState([1,2]) .
Tal vez solo intente obtener sus ID con una función de estado en lugar de usar una variable que se haya definido antes:
const [ids, setIds] = useState([1,2]); const get_ids = () => this.state.ids; useLayoutEffect(() => { navigation.setOptions({ headerRight: () => <HeaderRight onPress={() => console.log(get_ids()); updateIdsToServerViaAPI(); } /> }); }, [navigation]);