Tengo un archivo json que cargo y uso Hook to SetState. Después de SetState, quiero usar el estado con Value of Json para mi función. Pero mi función se ejecuta con un valor nulo porque setState no se carga antes de la función Ejecutar. Aquí está el código
const fetchQuestions = async () => { const data = await require("../../question.json"); await setQuestions( data.map((item: IQuestion) => ({ id: item.id, question: item.question, answers: item.answers }) )) await setQuestionsArray( data.map((item: IQuestion) => ({ id: item.id, name: item.question }) )) return questionsArray }Hay una función que paso questionArray:
const handleQuest = (array: Array<IArrayQuestion>) => { if (array.length > 0) { const numberArray = array.length const random = Math.floor(Math.random() * (numberArray - 0)) const p = (array[random]) setQuestion(p.name) setShuffleRandom(!shuffleRandom) } }Y lo uso en useEffect
useEffect(() => { if (nick.length < 1) { navigate('/quiz') } fetchQuestions().then((res)=>{ if (questionsArray.length > 0){ handleQuest(res) } else{console.log("Nothing")} }) }, [])Todavía no funciona. No tengo valor en mi función después de la promesa.
Separe la lógica de obtención de datos de los componentes de su aplicación. Primero escriba fetchQuestions -
async function fetchQuestions() { const data = await require("../../questions.json") return data.map(item => ({ id: item.id, question: item.question, answers: item.answers }) }Su componente no debe copiar datos a varios estados. Debe haber una única fuente de verdad . No necesita varias matrices de preguntas ni una copia de la pregunta actual. En su lugar, use el estado derivado (computado) para hacer referencia a la pregunta "actual":
import { fetchQuestions } from "./api" function MyComponent() { const [questions, setQuestions] = useState([]) const [current, setCurrent] = useState(0) useEffect(async _ => { try { const q = await fetchQuestions() setQuestions(q) setCurrent(Math.floor(Math.random() * q.length))) } catch (err) { console.error(err.message) } ), []) return <div> <Question question={questions[current]} /> </div> } Su componente Question se vería así:
function Question({ question }) { return <div data-question-id={question.id}> Q: {question.name} {question.answers.map((answer, key) => <Answer key={key} answer={answer} /> )} </div> } Escriba el componente Answer , y así sucesivamente...
Necesitas agregar questionArray en las dependencias useEffect, pero debido a que es un estado, debes hacerlo en dos useEffects:
primero obtener datos:
useEffect(() => { if (nick.length < 1) { navigate('/quiz') } fetchQuestions() }, [])Y en segundo useEffect:
useEffect(() => { if (questionsArray.length > 0){ handleQuest(questionsArray) } else{console.log("Nothing")} }, [questionsArray])cuando questionArray está en usoEffect dependencies, con cada recuperación, se actualizará y se agregarán nuevas preguntas.