error: demasiados renderizados.
código explicativo: (
soy una matriz de mapeo de objetos: en esa función de mapeo, hice una nueva matriz de objetos ( raiting = [..rating, {}] ) y luego establecí useState state para que sea esa matriz de objetos ( setRatingFinal([...rating]) ) y luego, al final, lo muestro, pero recibo un error.
)
¿Puede alguien escribirme una respuesta para esto, si es posible escribir código en respuesta? Gracias.
var [ratingFinal, setRatingFinal] = useState([]) var rating = [] movies.map((movie, i) => { rating = [...rating, {index: i, value: movie["IMDB Votes"] * movie["IMDB Rating"]}]; }); setRatingFinal([...rating]) **//because of this is error** return ( <div> {ratingFinal.map((movie, i) => { <div key={i}>{movie.value}</div> })} </div> ); } export default App;las películas son una matriz de 3021 objetos - ejemplo de un objeto en esa matriz -
{"IMDB Rating": 6.3, "IMDB Votes": 365} Lo intenté sin var rating solo con ratingFinal , pero eso no funciona, así:
var [ratingFinal, setRatingFinal] = useState([]) movies.map((movie, i) => { setRatingFinal([...ratingFinal, {index: i, value: movie["IMDB Votes"] * movie["IMDB Rating"]}]); }); return ( <div> {ratingFinal.map((movie, i) => { <div key={i}>{movie.value}</div> })} </div> ); } export default App;haga un tiempo de espera y mueva setRatingFinal([...rating]) en un tiempo de espera mínimo de 100 ms, y debe hacer un objeto con valor porque en el primer renderizado no se mostrará (no puede leer la propiedad de indefinido)
var [ratingFinal, setRatingFinal] = useState([{value: 'something'}])Está utilizando el método .map() incorrectamente; si desea mantener la sintaxis, use .forEach() .
El mapa devuelve una nueva matriz, por lo que el uso es:
const rating = test.map((movie, i) => { return {index: i, value: movie["IMDB Votes"] * movie["IMDB Rating"]} }); setRatingFinal(rating)