Ошибка: Слишком много повторных рендеров. потому что я изменил состояние набора

#javascript #reactjs #rendering #use-state

#язык JavaScript #реагирует на #визуализация #состояние использования

Вопрос:

ошибка: слишком много повторных воспроизведениях.
объясняя, код: (
иам мапин выбора объекта — в том, что отображение функции я купил новый массив объектов( raiting = [..rating, {}] ), затем установить useState государства, что массив объектов ( setRatingFinal([...rating]) ), а затем в финале я-дисплей — но ведь я получаю ошибку.
)
Может кто-нибудь написать мне ответа на этот вопрос, если его возможное, чтобы написать код в ответ. Спасибо.

 var [ratingFinal, setRatingFinal] = useState([]) var rating = []  movies.map((movie, i) =gt; {  rating = [...rating, {index: i, value: movie["IMDB Votes"] * movie["IMDB Rating"]}]; });  setRatingFinal([...rating]) **//because of this is error**    return (  lt;divgt;  {ratingFinal.map((movie, i) =gt; {  lt;div key={i}gt;{movie.value}lt;/divgt;  })}  lt;/divgt;  ); }  export default App;  

фильмы представляют собой массив из 3021 объекта — пример одного объекта в этом массиве —

 {"IMDB Rating": 6.3, "IMDB Votes": 365}  

я пробовал без var rating просто с ratingFinal , но и это не сработало — вот так:

 var [ratingFinal, setRatingFinal] = useState([])    movies.map((movie, i) =gt; {  setRatingFinal([...ratingFinal, {index: i, value: movie["IMDB Votes"] * movie["IMDB Rating"]}]);  });    return (  lt;divgt;  {ratingFinal.map((movie, i) =gt; {  lt;div key={i}gt;{movie.value}lt;/divgt;  })}  lt;/divgt;  );  }    export default App;  

Ответ №1:

сделайте тайм-аут и переместитесь setRatingFinal([...rating]) в тайм-аут минимум на 100 мс, и вы должны сделать один объект со значением, потому что при первом рендеринге он не будет отображаться (он не может прочитать свойство undefined)

 var [ratingFinal, setRatingFinal] = useState([{value: 'something'}])  

Ответ №2:

Вы .map() неправильно используете метод — если хотите сохранить синтаксис .forEach() .

Карта возвращает новый массив, поэтому использование:

 const rating = test.map((movie, i) =gt; {   return {index: i, value: movie["IMDB Votes"] * movie["IMDB Rating"]} });  setRatingFinal(rating)  

Комментарии:

1. Привет, я попробовал это и ту же ошибку — я думаю, что проблема в setRatingFinal, а не в функции отображения. но спасибо, что ответили