javascript - 避免 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 在 table 上

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

Answer 1

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

你可以这样做，

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