Блог

Главная - Вопросы по программированию - ReactJS useEffect() запускается каждый раз при загрузке страницы

ReactJS useEffect() запускается каждый раз при загрузке страницы

#javascript #reactjs #react-hooks #use-effect

#javascript #reactjs #реагирующие хуки #использование-эффект

Вопрос:

Мой useEffect() запускается каждый раз при загрузке страницы. Я хочу, чтобы он запускался после нажатия кнопки. Мой код выглядит следующим образом :

 import React, { useState , useEffect } from 'react';


const HooksDemo = () => {

    const [myArray, setMyArray] = useState([]);

    useEffect(() => {
        if(myArray) {
            console.log("My Array    : ",myArray)
        }
    } , [myArray])


       const populateArray = () => {
           var sampleData = [
               { id: 1, name: "Carl" },
               { id: 2, name: "Negan" },
               { id: 3, name: "Daryl" }
           ];

           setMyArray(sampleData);
       }


    return (
        <div>
       
            <button onClick={populateArray}> Populate Array </button>
        
        </div>
    );
};

export default HooksDemo;

Я хочу распечатать myArray в консоли после его заполнения с помощью функции populateArray(), но функция useEffect() запускается при загрузке страницы, а также после выполнения функции populateArray() .

Ответ №1:

Это нормальное поведение useEffect перехвата.
Вы можете добавить свою собственную логику, определяющую, когда она должна или не должна вызывать функцию при загрузке страницы, например, проверяя, пуст массив или нет.

 useEffect(() => {
  if(myArray.length > 0) {
    console.log("My Array    : ",myArray)
  }
} , [myArray])

Ответ №2:

Вы можете использовать useRef перехват, сохранить исходную ссылку на массив в контейнере ref, чтобы при каждом повторном отображении сохранялось начальное значение.

Затем поместите проверку в useEffect обратный вызов, чтобы он выполнялся только при изменении ссылки на массив при каждом изменении состояния:

 const {useState, useEffect, useRef} = React;

const HooksDemo = () => {
  const [myArray, setMyArray] = useState([]);
  const myArrayRef = useRef(myArray);
  useEffect(() => {
    if (myArray !== myArrayRef.current) {
      console.log("My Array    : ", myArray);
    }
  }, [myArray, myArrayRef]);

  const populateArray = () => {
    var sampleData = [
      { id: 1, name: "Carl" },
      { id: 2, name: "Negan" },
      { id: 3, name: "Daryl" }
    ];

    setMyArray(sampleData);
  };

  return (
    <div>
      <button onClick={populateArray}> Populate Array </button>
      {}
    </div>
  );
};
ReactDOM.render(<HooksDemo/>, document.querySelector("#container"));  
 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<body>
  <div id="container">
  </div>
</body>