当我从 API 获取数据时，MUI-dataTables 出错

Question

enter image description herecode我尝试从 API 获取数据并使用 MUI-dataTables 显示 但是发生了这个错误（您可以在附图中看到它）我将它与创建反应应用程序一起使用 **

import React,{useEffect,useContext, useState} from 'react'
import MUIDataTable from "mui-datatables";
import axios from'axios'
const columns = [
    {
        name: "name",
        label: " name",
        options: {
      filter: true,
      sort: true,
     }
    },
    {
        name: "username",
     label: " username",
     options: {
      filter: true,
      sort: true,
     }
    },
    {
        name: "email",
     label: "email",
     options: {
      filter: true,
      sort: true,
     }
    },
   ];
   

   


const options = {
    filterType: 'checkbox',
    serverSide: true
};

function Users() {
    const [users,setUsers]=useState('');
    useEffect(()=>{
      const getUsers = async ()=>{
         await axios.get('https://jsonplaceholder.typicode.com/users').then(response=>{
            setUsers(response.data);
         })
      };
      getUsers();
    },[])
    return (
        <div>
             <MUIDataTable
                title={" Users"}
                data={users}
                columns={columns}
                options={options}
            />
        </div>
    )
}

export default Users

Answer 1

因为 MUIDataTable 中的 props data 需要一个数组。在获取 API 时，users 是一个字符串 ``（因为 const [users,setUsers]=useState('');）。所以出现了这个错误。

要修复，你需要更新users的初始值是这样一个数组：

[users,setUsers]=useState([]);