useState вызывает ошибку Слишком много повторных отрисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл - PullRequest
Новая
       1

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

1 голос
/ 19 июня 2020

Когда я использую setMiddle (true) , появляется сообщение об ошибке «Слишком много повторных отрисовок ..»

Подскажите, пожалуйста, почему? 

import React, { useState } from "react";

const App = () => {
  const [ test, setTest ] = useState(true)
  const [ test1, setTest1 ] = useState(false)
  const [ middle, setMiddle ] = useState(false)

  const setFrame = () => {
    console.log('123')
    setTest1(false)
  }

  const titleScreen = () => {        

    setMiddle(true)
    setFrame('myRoom');

    return
  }

  const renderFrame = () => {
    return (<div>Ta-daa!</div>)
  }


  return (
    <div>
        {test1 ? renderFrame() : null}
        {test ? titleScreen() : null}
    </div>
  )
}


export default App

Но когда я удаляю строку setMiddle (true) и setTest1 (false) , это работает

1 Ответ

1 голос
/ 19 июня 2020

Это происходит потому, что test вначале истинно, поэтому вызывается titleScreen(), и внутри этой функции вы изменяете состояние, которое запускает повторную визуализацию, и, поскольку test никогда не меняет своего значения, он вызывает снова titleScreen(), а затем вы попадаете в фантомную зону под названием The Infinite L oop. ?

Как это предотвратить? всегда изменяйте состояние, когда что-то происходит в вашем приложении, при взаимодействии с пользователем, вызове API и т. д. c. никогда не делайте этого при рендеринге страницы, или, если вы это сделаете, убедитесь, что вы нарушили условие, в этом случае измените значение test в какой-то момент.

...