use effect сам повторяется

Question

После запуска код начинает сам повторяться (делается бесконечный цикл) и крашится

`

const [track_data, set_track_data] = React.useState({})

React.useEffect(()=>{

    var datas = {

    "name":"test"

    }


    set_track_data({datas})

    };

})

`

Answer 1

Вам определённо надо почитать как работает useEffect

Если вкратце, то useEffect вызывается самый первый раз при инициализации компоненты и в каждый следующий раз, когда обновляется состояние компоненты

Вот и у вас при инициализации вызывается useEffect, который внутри себя запускает обновление состояния (set_track_data). После обновления состояния опять вызывается useEffect, который опять запускает обновление состояния и т.о. это продолжается бесконечно:

const {useState, useEffect} = React;


const App = () => {
  const [track_data, set_track_data] = useState({});

  useEffect(() => {
      var datas = {
        "name":"test"
      }
      
      console.log("I'm updated");

      set_track_data(datas);
  });
  
  return (
    <div>{track_data.name}</div>
  )
}

ReactDOM.render(<App/>, document.querySelector('#root'));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

Судя по коду, который вы опубликовали, вам надо просто при инициализации компоненты, записать значение в track_data. Для этого useEffect вообще можно не использовать, а просто поставить это значение как начальное значение:

const {useState} = React;

const App = () => {
  var datas = {
    "name":"test"
  }
  
  const [track_data, set_track_data] = useState(datas);
  
  console.log('Updated');
  
  return (
    <div>{track_data.name}</div>
  )
}

ReactDOM.render(<App/>, document.querySelector('#root'));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

Если же это просто вырезанный кусок кода, где вам надо вызвать useEffect всего один раз, то вам надо просто передать пустой массив зависимостей, тогда useEffect сработает всего 1 раз при инициализации:

const {useState, useEffect} = React;


const App = () => {
  const [track_data, set_track_data] = useState({});

  useEffect(() => {
      var datas = {
        "name":"test"
      }
      
      console.log("I'm updated");

      set_track_data(datas);
  }, []);
  
  return (
    <div>{track_data.name}</div>
  )
}

ReactDOM.render(<App/>, document.querySelector('#root'));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

БЛОГ НА HUSL

use effect сам повторяется

Ответы (1 шт):