Слишком много повторных рендеров. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл. Ошибка пользовательского интерфейса и коноле

import {useState, useEffect} из 'response' import './App.css';

function App () {

const [количество, setCount] = useState (0)

useEffect (() = ›{

console.log('render')

}, [считать])

Во-первых: показывать мне в пользовательском интерфейсе, но отправлять мне ошибку при conosle: слишком много повторных отрисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл.

const plusCount = () = ›{

setCount(count + 1)   }

const minsCount = () = ›{

setCount(count - 1)   }

Второе: не показывать в пользовательском интерфейсе, отправлять мне ошибку в пользовательском интерфейсе: слишком много повторных отрисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл.

const makeCount = {

add:setCount(count + 1),

discount:  setCount(count - 1)

}

возвращение (

  <h1>Exercise</h1>
  <p>Cunt: <b>{count}</b></p>
  <button onClick={plusCount}>Add</button>
  <button onClick={minsCount}>Discount</button>

</div>

) }

экспортировать приложение по умолчанию;

Предположение: почему это сообщение показывает мне ошибку в обоих случаях, но в первый раз я показываю в пользовательском интерфейсе, во второй не показываю в пользовательском интерфейсе


reactjs use-state
person Sava    schedule 23.04.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы выполняете функцию setCount при рендеринге, что вызывает повторную визуализацию, которая приводит к бесконечному циклу:

const makeCount = {
     add: setCount(count + 1),
     discount:setCount(count - 1)
}

Этот объект фактически вызывает функцию setCount вместо того, чтобы создавать вызываемую функцию.

Вам нужно изменить его на:

const makeCount = {
     add: () => setCount(count + 1),
     discount: () => setCount(count - 1)
}

Это создаст новые функции, называемые добавлением и скидкой, вместо вызова setCount.

person Domino987    schedule 23.04.2021