MaterialTable 无法填充它

Question

不知道为什么，我在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}
    />
  );
}

Answer 1

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

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

使用此代码段

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 => {
          // as per your code I am assuming the responseJson data structure - 
          // ['name value', 'surname value', 'username value', 'email value']
          var name = responseJson[0];
          var surname = responseJson[1];
          var username = responseJson[2];
          var email = responseJson[3];
          const responseObject = {name, surname, username, email}
          setState(prev => ({...prev, data: [...prev.data, responseObject]}))
          _callback();
        })
        .catch(error => {
          console.error(error.toString());
        });
    };
    getUsers(function() {
      console.log("finish");
    });

  }, []);

Answer 2

您在使用 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>
    );
}

MaterialTable 无法填充它

MaterialTable can't populate it

javascript

reactjs

material-ui

material-table