React使用MDBDataTable刷新页面数据不加载，切回组件才加载如何解决

• useEffect依赖数组为空，仅会在组件首次挂载时执行一次。getClients是异步接口请求，首次执行setDatatable时Redux中的clients还未返回结果，拿到的是空值，因此表格没有渲染数据。
• 跳转到其他组件再返回时，TopSearchSelect组件会重新挂载，此时Redux中已经缓存了之前请求成功的clients数据，setDatatable可以拿到正确的行数据，表格正常渲染。

1. 调整useEffect依赖，新增clients作为依赖项，当Redux中的clients更新时自动重新生成表格数据。
2. 拆分逻辑为两个useEffect，分别处理数据请求和表格数据生成，逻辑更清晰易维护。
3. 修正datatable初始值为符合MDBDataTable要求的结构，避免初始化报错。

import React, { useState, useEffect, Fragment } from 'react';
import { MDBDataTableV5 } from 'mdbreact';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import { getClients } from '../../actions/clients';


const TopSearchSelect = ({ clients, getClients }) => {
  // 修正初始值结构
  const [datatable, setDatatable] = useState({columns: [], rows: []});

  // 仅组件挂载时触发一次数据请求
  useEffect(() => {
    getClients();
  }, [getClients]);

  // 监听clients变化，自动更新表格数据
  useEffect(() => {
    setDatatable({
      columns: [
        {
          label: 'First Name',
          field: 'firstName',
          width: 150,
          attributes: {
            'aria-controls': 'DataTable',
            'aria-label': 'Name',
          },
        },
        {
          label: 'Last Name',
          field: 'lastName',
          width: 270,
        },
        {
          label: 'Phone',
          field: 'phone',
          width: 200,
        },
        {
          label: 'Email',
          field: 'email',
          sort: 'asc',
          width: 100,
        },
        {
          label: 'Date added',
          field: 'date',
          sort: 'disabled',
          width: 150,
        },
      ],
      rows: clients?.map(client => ({
        firstName: client.firstName,
        lastName: client.lastName,
        phone: client.phone,
        email: client.email,
        date: client.date,
      })) || []
    });
  }, [clients]);


  return (
    <MDBDataTableV5
      hover
      entriesOptions={[5, 10, 20, 25]}
      entries={5}
      pagesAmount={4}
      data={datatable}
      pagingTop
      searchTop
      searchBottom={false}
    />
  );
}

TopSearchSelect.propTypes = {
  getClients: PropTypes.func.isRequired,
  clients: PropTypes.array,
}

const mapStateToProps = state => ({
  clients: state.clients.clients
});

export default connect(mapStateToProps, { getClients })(TopSearchSelect);

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