将数据从数据库显示到MaterialTable React Js

问题描述

enter image description here我是React的新手,我不知道如何在以下代码显示不同类型的数据: 看起来我可以获取数据并将其保存在setTableData中,但是我无法在表中显示它。

功能主页(道具){

const [tableData,setTableData] = useState([]);


useEffect(() => {
    async function loadUsers() {
        axios
        .get(`http://localhost/fastlink/FetchData.PHP`,{})
        .then(res => {

                const data = res.data
                console.log(data)
                setTableData(data)    
        })  
        .catch((error) => {
            console.log(error)
        })
    }

    loadUsers();
},[])

const [columns,setColumns] = useState([
    { title: 'Name',field: 'name' },{ title: 'Email',field: 'email'},]);

return (

        
            <div style={{flexGrow: "1",padding: "theme.spacing(3)",width: "80%",float:"right"}}>
                <MaterialTable
                icons={tableIcons} style={{ marginTop: "10%" }}
                title="All Users"
                columns={columns}
                data={tableData}
                editable={{
                  onRowAdd: newData =>
                    new Promise((resolve,reject) => {
                      setTimeout(() => {
                        setTableData([...tableData,newData]);
                            
                        resolve();
                      },1000)
                    }),onRowUpdate: (newData,oldData) =>
                    new Promise((resolve,reject) => {
                      setTimeout(() => {
                        const dataUpdate = [...tableData];
                        const index = oldData.tableData.id;
                        dataUpdate[index] = newData;
                        setTableData([...dataUpdate]);
            
                        resolve();
                      },onRowDelete: oldData =>
                    new Promise((resolve,reject) => {
                      setTimeout(() => {
                        const dataDelete = [...tableData];
                        const index = oldData.tableData.id;
                        dataDelete.splice(index,1);
                        setTableData([...dataDelete]);
                            
                        resolve()
                      },}}
              />
                  
            </div>
    
    
);

} 在此处输入图片描述 图片是我数据库中的数据,我想在表格中显示名称和电子邮件地址

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)