Question

我的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;

我想在使用populateArray（）函数填充myArray之后在控制台中打印myArray，但是useEffect（）函数在页面加载时以及执行populateArray（）函数之后正在运行。

Answer 1

这是useEffect钩子的正常行为。
您可以添加自己的逻辑以确定在页面加载时何时应该调用或不应该调用函数，例如通过检查数组是否为空。

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

Answer 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>

每当页面加载时，ReactJS useEffect（）都会运行

2 个答案: