Как решить проблему с ошибкой "Too many re-renders. React limits the number of renders to prevent an infinite loop." в React Native?

  • 20 августа 2023 г. 11:16
Ответы на вопрос 1
Вот пример правильного использования и исправления ошибки "Too many re-renders" в React Native:

```jsx
import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [totalHours, setTotalHours] = useState(0);

  useEffect(() => {
    let total = 0;
    for (let key in hoursList) {
      total += totalHours[key];
    }
    setTotalHours(total);
  }, [hoursList]);

  return (
    <div>
      <h1>Total Hours: {totalHours}</h1>
    </div>
  );
};

export default MyComponent;
```

Здесь мы используем хук useEffect для выполнения вычислений и обновления значения totalHours только при изменении hoursList. Это предотвращает бесконечный цикл обновлений компонента.

Теперь код будет работать без ошибки "Too many re-renders", и значение totalHours будет корректно обновляться при изменении hoursList.
Похожие вопросы