微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决将数据从数据库显示到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 举报,一经查实,本站将立刻删除。