Quiero hacer un botón de me gusta simple, que tenga el color apropiado, dependiendo de si le gusta o no. Intento calcular esto por adelantado (antes del regreso) con React.useEffect , pero parece calcularlo después... Puedo verlo porque todos los corazones no están coloreados, pero cuando realizo una recarga suave, cambian a el color correcto... ¿Alguien sabe qué estoy haciendo mal aquí?
const Hart = ({subject}) => { const [liked, setLiked] = useState(false); const [hasloaded,setHasloaded] = useState(false); const [ownId, setOwnId] = useState(''); const [token, setToken] = useState(''); const [favourite, setFavourite] = useState([]); const favouriteId = []; React.useEffect(()=> { const constructor = async () => { await refreshToken(); //favourites contains all the favorite subjects //This calculates the boolean to check if the subject is liked or not //This array is calculated with axios, and is correct for(let i = 0; i<favourite.length; i++) { if(favourite[i].id === subject.id) setLiked(true) } setHasloaded(true); console.log("done") } constructor(); },[]) if(!hasloaded) return null; else{ return ( <Pressable style= {styleSubjectList.heartIcon} onPress={() => checkFavorite()}> <MaterialCommunityIcons name={liked ? "heart" : "heart-outline"} size={20} color={liked ? "red" : "white"} /> </Pressable> ); } }; export default Hart;El constructor de funciones es asíncrono y está configurando dos estados que también son funciones asíncronas. Por lo tanto, el ciclo for que finalmente desencadena setLiked no finalizará antes de que sethasLoaded se establezca en verdadero. Necesitas sincronizar ambas operaciones.
const constructor = async () => { await refreshToken(); for(let i = 0; i<favourite.length; i++) { if(favourite[i].id === subject.id) setLiked(true) } } constructor().then(() => setHasloaded(true)).catch(e => console.log(e)) React.useEffect(()=> { const constructor = async () => { await refreshToken(); let token = await getAccessToken(); setToken(token); let id = await getFromStore("ownId"); id = removeFirstAndLast(id) setOwnId(id) const axios = require('axios' ); const config = { method: 'get', url: backendURL + '/userManagement/users/' + id, headers: { 'Authorization': 'Bearer ' + JSON.parse(token) } }; axios(config) .then(function (response) { setFavourite(response.data.favouriteSubjects) // console.log(response.data.favouriteSubjects) }) .catch(function (error) { console.log(error); }); for(let i = 0; i<favourite.length; i++) { if(favourite[i].id === subject.id) setLiked(true) } } constructor().then(() => { setHasloaded(true); console.log("done"); }).catch(e=>console.log(e)); },[])