React Axios获取新数据后如何替换旧数组状态更新MDB数据表

DataTable组件中的datatable状态仅在组件首次挂载时完成初始化，后续父组件传入的最新items数据没有同步更新到datatable的rows字段中，状态未发生变更就不会触发表格重渲染。你手动修改columns属性时本质是触发了状态更新函数，所以才会强制表格刷新。

仅需修改DataTable.js文件，新增副作用监听传入的items变化，每次拿到新数据时同步更新datatable状态的rows字段即可，硬编码的表头配置、App.js和Search.js的原有逻辑都不需要改动。

修改后的完整DataTable.js代码如下：

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

export default function Basic({ items }) {
  const [datatable, setDatatable] = useState({
    columns: [
      {
        label: 'Region',
        field: 'Admin2',
        width: 140,
        attributes: {
          'aria-controls': 'DataTable',
          'aria-label': 'Name',
        },
      },
      {
        label: 'State',
        field: 'State',
        width: 120,
      },
      {
        label: 'Incident Rate',
        field: 'Incident_Rate',
        width: 100,
      },
      {
        label: 'Confirmed',
        field: 'Confirmed',
        width: 120,
      },
      {
        label: 'Deaths',
        field: 'Deaths',
        width: 55,
      },
      {
        label: 'Last Update',
        field: 'Last_Update',
        width: 55,
      },
    ],
    rows: []
  });

  // 监听传入的items变化，同步更新表格行数据
  useEffect(() => {
    const formattedRows = items.map((item, index) => ({
      id: index + 1,
      Admin2: item.attributes.Admin2,
      State: item.attributes.Province_State,
      Incident_Rate: Math.round(item.attributes.Incident_Rate),
      Confirmed: item.attributes.Confirmed,
      Deaths: item.attributes.Deaths,
      Last_Update: new Date(item.attributes.Last_Update).toLocaleDateString(),
    }));

    setDatatable(prevState => ({
      ...prevState,
      rows: formattedRows
    }))
  }, [items])

  return (
    <MDBDataTableV5 
      hover 
      entriesOptions={[5, 20, 25, 100]} 
      entries={25} 
      pagesAmount={4} 
      data={datatable}
      fullPagination
    />
  );
}

• 把原组件顶层格式化数据的逻辑移到了副作用回调中，避免组件每次渲染都重复计算行数据
• 初始化datatable状态时rows默认设为空数组，待数据传入后再完成赋值
• 新增useEffect监听items变更，每次拿到新的搜索结果时都会调用状态更新函数修改rows字段，自动触发表格重渲染，无需手动修改columns属性
• 顺手修正了原代码重复导入React hooks的不规范写法

内容的提问来源于stack exchange，提问作者karhu