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

如何解决当我从 API 获取数据时 MUI-dataTables 出错

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

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",{
        name: "email",label: "email",];
   

   


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

解决方法

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

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

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