错误：重新渲染过多。因为我改变了 setState答案

【问题标题】：Error: Too many re-renders. because i changed setState错误：重新渲染过多。因为我改变了 setState
【发布时间】：2021-12-02 16:40:53
【问题描述】：

错误：重新渲染过多。
解释代码：(
iam 映射对象数组 - 在该映射函数中，我创建了新的对象数组（raiting = [..rating, {}]）然后将 useState state 设置为对象数组（setRatingFinal([...rating])）然后最后我显示 - 但我收到错误。
)
如果可以在答案中编写代码，有人可以给我写答案吗？谢谢。

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;

电影是由 3021 个对象组成的数组 - 该数组中的一个对象的示例 -

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

我尝试不使用var rating，只使用ratingFinal，但这不起作用——像这样：

 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;

【问题讨论】：

标签： javascript reactjs rendering use-state

【解决方案1】：

超时并移动setRatingFinal([...rating]) 至少超时100ms，并且您必须创建一个具有值的对象，因为在第一次渲染时它不会显示（它无法读取未定义的属性）

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

【讨论】：

【解决方案2】：

您错误地使用了 .map() 方法 - 如果您想保留语法，请使用 .forEach()。

Map 返回一个新数组，所以用法是：

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

setRatingFinal(rating)

【讨论】：

嗨，我试过这个，同样的错误——我认为问题出在 setRatingFinal，而不是因为映射函数。但感谢您的回答