更新react-table中的useMemo数据

Question

我刚开始使用 react-table，我还不知道如何在加载页面时使用 Memo。加载页面时如何将数据（来自 api）推送到 const 数据中。

import React, { useEffect, useState, useMemo } from "react";
import "../../custom.css";
import {COLUMNS} from './columns';
import { useTable } from "react-table";
import { ButtonGroup } from "../ButtonMenu";
import ChildInput from "../ChildInput/ChildInput";
import ChildModal from "../ChildModal/ChildModal";

export default function ChildTableNew() {
  const [childrens, setChildrens] = useState([]);
  const [selectedRow, setSelectedRow] = useState(-1);
  const [loading, setLoading] = useState(true);
  const [createModal, setCreateModal] = useState(false);
  const columns = useMemo(() => COLUMNS, [])
  const data = useMemo(() => childrens, [childrens])

  const [name, setName] = useState("");

  useEffect(() => {
    Get();
    console.log(data);
  }, []);

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    footerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  })
  

  return (
    loading? 
    <p>
      <em>Loading...</em>
    </p> : 
    <div>

      <ChildModal visible={createModal} setVisible={setCreateModal}>
      <form>
        <ChildInput 
        value={name} 
        onChange={e => setName(e.target.value)} 
        type="text" 
        placeholder="Имя"/>

        <ChildInput type="text" placeholder="Фамилия" />
        <ChildInput type="text" placeholder="Отчество" />
        <ChildInput type="date" placeholder="Дата рождения" />
        <select className=".sex" >
        <option disabled> Пол </option>
        <option value="мальчик"> мальчик </option>
        <option value="девочка"> девочка </option>
        </select>
        <ChildInput type="text" placeholder="Полис" />
        <ChildInput type="text" placeholder="Адрес" />
        <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-add" onClick={Add}>
          Создать
        </button>
        <button type="button" class="btn btn-delete" onClick={() => setCreateModal(false)}>
          Закрыть
        </button>
        </div>
      </form>
      </ChildModal>

      <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-add" onClick={() => setCreateModal(true)}>
          Add
        </button>
        <button type="button" class="btn btn-update">
          Update
        </button>
        <button type="button" class="btn btn-delete" onClick={Delete}>
          Delete
        </button>
      </div>
      
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                })}
              </tr>
            )
          })}
        </tbody>
        <tfoot>
          {footerGroups.map(footerGroup => (
            <tr {...footerGroup.getFooterGroupProps()}>
              {footerGroup.headers.map(column => (
                <td {...column.getFooterProps()}>{column.render('Footer')}</td>
              ))}
            </tr>
          ))}
        </tfoot>
      </table>
      </div>
  );

  async function Add(e){
    e.preventDefault()
    console.log(name)
    setCreateModal(false)
  }
  async function Delete(){

  }
  
  async function Get() {
    const response = await fetch("api/Children");
    const data = await response.json();
    setChildrens(data);
    setLoading(false);
  }
}

现在我正在使用 useEffect 从 api 获取表的数据（我有一个正常工作的表，但我想将它移动到 react-table）。