Obtengo algunos datos de una llamada api y los configuro en un estado. Luego uso esta variable de estado en otra función para filtrar algunos datos. Cuando el usuario abre la interfaz por primera vez, los datos no se muestran porque la función de sincronización obtiene los datos vacíos del estado.
Aquí está el código:
const [evQuestion, setEvQuestion] = useState(); const [answers, setAnswers] = useState(); const getEvaluationsQuestionsByOrganizations = async (evalId) => { const response = await apiStandarts.get(`/evaluation-questions?organization_evaluation=${evalId}`); setEvQuestion(response.data); }; const evAnswers = () => { const evAnswers = questions.map(q => { return evQuestion?.map(ev => { return q.question_options.find(i => i.id === ev.questOptionId) }); }); const filterAnswers = evAnswers.map(q => { return q?.filter(Boolean) }) const answersToObject = filterAnswers.map(item => { return convertArrayToObject(item) }); const arr = {...answersToObject} const obj2 = Object.fromEntries( Object.entries(arr).map(([key, value]) => [key, value]) ) const obj3= Object.values(obj2).map(item => { return {[item.question]: {...item}} }) const savedAnswers = convertArrayToObject(obj3); console.log(savedAnswers) setAnswers(savedAnswers) } useEffect(() => { getEvaluationsQuestionsByOrganizations(); evAnswers(); }, []) Intenté envolver la función evAnswers en una función settimeout pero no tuve suerte. ¿Cómo puedo lograr esto, alguna idea?
Intente agregar otro useEffect que dependa del estado de evQuestion .
useEffect(() => { getEvaluationsQuestionsByOrganizations(); }, []); useEffect(() => { evAnswers(); }, [evQuestion]);la función getEvaluationsQuestionsByOrganizations(..) se define como una función asíncrona , pero la estás usando de forma síncrona , en ese caso deberías llamar a tus códigos de la siguiente manera:
useEffect(() => { const fetchedDataAPI = async () => { return await getEvaluationsQuestionsByOrganizations(); }; fetchedDataAPI .then(res => { evAnswers();}) .catch(err => {..}); ; }, []);