Estoy tratando de generar una matriz de palabras aleatorias extraídas de una API y luego actualizar las nuevas al hacer clic en un botón, en este momento puedo actualizar la matriz con nuevas palabras, pero parece que no sé cómo volver a representar el componente después de actualizar el formación. Logré una forma, pero actualiza las palabras, palabra por palabra cuando el ciclo las recorre y lo que quiero es una forma de actualizar todas las palabras a la vez cuando se recuperan todas las palabras.
Lo siento si he tenido dificultades para explicarme, pero el inglés no es mi idioma nativo.
Esto es lo que tengo por ahora con palabras actualizadas pero no al mismo tiempo:
const [words, setWords] = useState([]); const throwDices = () => { words.map((word, index) => { fetch("https://palabras-aleatorias-public-api.herokuapp.com/random") .then((response) => { if (response.ok) { return response.json(); } throw Response; }) .then((data) => { words[index] = data.body.Word; setWords([...words]); }); }); }; useEffect(() => { throwDices(); }, []);Esta respuesta está inspirada en este artículo.
const [words, setWords] = React.useState(); const callApiTenTimes = async () => { // create an array of promises let promises = []; for (let i = 0; i < 10; i++) { promises.push(fetch("https://palabras-aleatorias-public-api.herokuapp.com/random")); } // wait for all promises to fulfill Promise.all(promises) .then((responses) => // Get a JSON object from each of the responses Promise.all(responses.map((res) => res.json())) ) .then((data) => { // Get all the data and store it in our useState const results = data.map(({ body }) => body.Word); setWords(results); }) .catch((err) => console.warn(err)); }; // On first render when words === undefined, call API once to fetch first 10 words useEffect(() => { if (!words) { callApiTenTimes(); } }, [words]); return ( <> {/* render each word in the word array */} {words.map((word) => ( <p>{word}</p> ))} {/* get new words after a button click */} <button onClick={() => callApiTenTimes()}>Get new words</button> </> )