Javascript 可材料罐'；我无法填充它

我不知道为什么，在我调用useEffect中的fetch函数后，getUsers函数没有填充我的数据变量，我看不到MaterialTable中的数据行，数据的结构是列，请帮助我，我不知道怎么做，我错在哪里

function createData(name, surname, username, email) {
  return { name: name, surname: surname, username: username, email: email };
}
export default function MaterialTab() {
  const [state, setState] = useState({
    columns: [
      { title: 'Name', field: 'name' },
      { title: 'Surname', field: 'surname' },
      { title: 'Username', field: 'username' },
      { title: 'Email', field: 'email' },
    ],
    data: [],
  });
  useEffect(() => {
    function getUsers(_callback) {
      fetch('conn', {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          username: localStorage.getItem("username")
        })
      })
        .then(response => response.json())
        .then(responseJson => {
          var name = new Array(responseJson[0]);
          var surname = new Array(responseJson[1]);
          var username = new Array(responseJson[2]);
          var email = new Array(responseJson[3]);
          var count = name[0]["length"];
          var rows = new Array();
          var i = 0;
          while (i <= count) {
            state.data.push(
              createData(name[0][i], surname[0][i], username[0][i], email[0][i])
            );
            i++;
          }
          setState(state.data);
          _callback();
        })
        .catch(error => {
          console.error(error.toString());
        });
    };
    getUsers(function() {
      console.log("finish");
    });

  }, []);
  return (
    <MaterialTable
      title="Clienti palestra"
      columns={state.columns}
      data={state.data}
    />
  );
}

函数createData（姓名、姓氏、用户名、电子邮件）{
返回{姓名：姓名，姓氏：姓氏，用户名：用户名，电子邮件：电子邮件}；
}
导出默认函数MaterialTab（）{
常量[状态，设置状态]=使用状态({
栏目：[
{title:'Name'，field:'Name'}，
{标题：'姓'，字段：'姓'}，
{标题：“用户名”，字段：“用户名”}，
{标题：'Email'，字段：'Email'}，
],
数据：[]，
});
useffect（（）=>{
函数getUsers（_回调）{
获取（'conn'{
方法：“张贴”，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify({
用户名：localStorage.getItem（“用户名”）
})
})
.then（response=>response.json（））
.然后（responseJson=>{
var name=新数组（responseJson[0]）；
var姓氏=新数组（responseJson[1]）；
var username=新数组（responseJson[2]）；
var email=新数组（responseJson[3]）；
变量计数=名称[0][“长度”]；
var rows=新数组（）；
var i=0；
而{
console.error（error.toString（））；
});
};
getUsers（函数（）{
控制台日志（“完成”）；
});
}, []);
返回(
);
}

您正在直接改变状态，并且没有正确更新

状态

根据您的代码，我假设responseJson数据结构类似于
['name value'、'姓氏value'、'username value'、'email value']

使用此代码段

useffect（（）=>{
函数getUsers（_回调）{
获取（'conn'{
方法：“张贴”，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify({
用户名：localStorage.getItem（“用户名”）
})
})
.then（response=>response.json（））
.然后（responseJson=>{
//根据您的代码，我假设responseJson数据结构-
//['name value'、'name value'、'username value'、'email value']
var name=responseJson[0]；
var姓氏=responseJson[1]；
var username=responseJson[2]；
var email=responseJson[3]；
const responseObject={姓名、姓氏、用户名、电子邮件}
setState（prev=>（{…prev，数据：[…prev.data，responseObject]}））
_回调（）；
})
.catch（错误=>{
console.error（error.toString（））；
});
};
getUsers（函数（）{
控制台日志（“完成”）；
});
}, []);
您在使用useState设置状态时遇到问题。我已更新了您的示例。请检查

import MaterialTable from "material-table";
import React, {useEffect, useState} from "react";

function createData(id, name, username, email) {
    return {id: id, name: name, username: username, email: email};
}

export default function MaterialTab() {
    const columns = [
        {title: 'Id', field: 'id'},
        {title: 'Name', field: 'name'},
        {title: 'Username', field: 'username'},
        {title: 'Email', field: 'email'},
    ];
    const [data, setData] = useState([]);
    const submission = {
        title: 'This is title',
        body: 'This is body',
        userId: 1
    };
    useEffect(() => {
        function getUsers(_callback) {
            fetch(`https://jsonplaceholder.typicode.com/users`, {
                method: "GET"
            })
                .then(response => response.json())
                .then(responseJson => {
                    console.log(responseJson, 'responseJson');
                    const results = [];
                    responseJson.map(res => {
                        results.push(
                            createData(res.id, res.name, res.username, res.email)
                        );
                    });
                    setData(results);
                    _callback();
                })
                .catch(error => {
                    console.error(error.toString());
                });
        }

        getUsers(function () {
            console.log("finish");
        });

    }, []);
    return (
        <div>
            {
                data ?
                    <MaterialTable
                        title="Clienti palestra"
                        columns={columns}
                        data={data}
                    /> : null
            }
        </div>
    );
}

从“物料表”导入物料表；
从“React”导入React，{useffect，useState}；
函数createData（id、名称、用户名、电子邮件）{
返回{id:id，name:name，username:username，email:email}；
}
导出默认函数MaterialTab（）{
常量列=[
{标题：'Id'，字段：'Id'}，
{title:'Name'，field:'Name'}，
{标题：“用户名”，字段：“用户名”}，
{标题：'Email'，字段：'Email'}，
];
const[data，setData]=useState（[]）；
提交常数={
标题：“这是标题”，
身体：'这是身体'，
用户ID:1
};
useffect（（）=>{
函数getUsers（_回调）{
取回(`https://jsonplaceholder.typicode.com/users`, {
方法：“获取”
})
.then（response=>response.json（））
.然后（responseJson=>{
log（responseJson，'responseJson'）；
常量结果=[]；
responseJson.map（res=>{
结果：推(
createData（res.id、res.name、res.username、res.email）
);
});
setData（结果）；
_回调（）；
})
.catch（错误=>{
console.error（error.toString（））；
});
}
getUsers（函数（）{
控制台日志（“完成”）；
});
}, []);
返回(
{
数据？
：null
}
);
}
使用您的代码，我可以看到记录，但都在一个表的行中