避免 useEffect 在第一次加载时渲染？

Question

我知道 useEffect 是componentDidUpdate和componentDidMount的“组合”？ 但是因为我已经传入了dependency项，为什么它在第一次加载时仍然加载？

import React, { useState, useEffect } from "react";
import { Button, Table, Column } from "antd";

const initData = [
  {
    id: 1,
    name: "James"
  },
  {
    id: 2,
    name: "John"
  }
];

function MyTable({ changeDataFlag }) {
  const [data, setData] = useState(initData);

  useEffect(() => {
    setData(
      data.map(o => ({
        id: "Titus",
        name: "Paul"
      }))
    );
  }, [changeDataFlag]);

  return (
    <Table dataSource={data} rowKey={data => data.id}>
      <Column title="Id" dataIndex="id" />
      <Column title="Name" dataIndex="name" />
    </Table>
  );
}

export default MyTable;

我希望在单击更新按钮之前看到 James 和 John 在桌子上

https://codesandbox.io/s/hello-antd-t29cs

Answer 1

默认情况下useEffect第一次运行，然后在依赖项发生变化时运行。

你可以这样做，

useEffect(() => {
    if(changeDataFlag){
      setData(
        data.map(o => ({
          id: "Titus",
          name: "Paul"
        }))
      );
    }
}, [changeDataFlag]);

Answer 2

在我看来，我认为您应该将更改数据逻辑放入 onclick 事件中。 通常，当您单击按钮时，您将从服务器获取数据并更改数据。

---

import React, { useState, useEffect } from "react";
import { Button, Table, Column } from "antd";

function MyTable({ data }) {
  return (
    <Table dataSource={data} rowKey={data => data.id}>
     <Column title="Id" dataIndex="id" />
     <Column title="Name" dataIndex="name" />
    </Table>
  );
}

export default MyTable;

---

import React, { useState, useEffect } from "react";
import { render } from "react-dom";
import "antd/dist/antd.css";
import MyTable from "./MyTable";
import { Button } from "antd";
const initData = [
  {
    id: 1,
    name: "James"
  },
  {
    id: 2,
    name: "John"
  }
];

const App = () => {
  const [changeDataFlag, setChangeDataFlag] = useState(false);
  const [data, setData] = useState(initData);
  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          setData(
            data.map(o => ({
              id: "Titus",
              name: "Paul"
            }))
          );
        }}
      >
        change data source
      </Button>
      <MyTable data={data} />
    </div>
  );
};

render(<App />, document.getElementById("root"));

Answer 3

一个没有目标的 useEffect 只输入一次，也许有帮助，之后你可以只为更新做一个 useEffect

useEffect(() => {
    setData(
      data.map(o => ({
        id: "Titus",
        name: "Paul"
      }))
    );
  }, []);

Answer 4

为了避免在第一个页面渲染时执行你的依赖useEffect那么你必须使用 - useEffect和useRef 。 它仅在下一次更改时运行

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

function MyComponent() {
  const [data, setData] = useState('some data');
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
    console.log("This will not be called on first render");
  }, [data]);

  return <div>My Component</div>;
}