尝试用API中的数据填充BootstrapTable

Question

这里是javascript/react新手。我正试图用api中的数据从引导程序填充表。我制作了两个组件-仪表板。js和CustomTable。js，都是功能性的。就我所知，在仪表板组件上，我需要进行API调用——我已经使用useEffect和axios完成了这项工作。在桌子上。js我需要对列和数据使用useState。我想使我的表成为动态的，包括行和列。看看我的仪表板代码。js。

 const Dashboard = (props) => {
  let state = [(columns: []), (data: [])];

  useEffect(() => {
    axios
      .get(`https://reqres.in/api/users?page=2`)
      .then((res) => {
        console.log(res);
        setData(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [data]);

  return (
    <div className="dashboard-content">
      <Header />
      <NewMessage />
      <CustomTable data={data} columns={columns} />
    </div>
  );
};

接下来，我得到了我的定制表。js功能组件，我尝试从我的父组件（Dashboard.js）传递道具，但我仍然无法确定下一步要做什么。

export default function CustomTable(props) {
  const [data, setData] = useState(props.data);
  const [columns, setColumns] = useState(props.columns);

  return (
    <div>
      <Table striped bordered hover>
        <thead>
          <tr>
            {columns.map((row) => {
              return <th>{row.name}</th>;
            })}
          </tr>
        </thead>
        <tbody>
          {data.map((row) => {
            return (
              <tr>
                <td>{row.id}</td>
                <td>{row.email}</td>
                <td>{row.first_name}</td>
                <td>{row.last_name}</td>
              </tr>
            );
          })}
        </tbody>
      </Table>
    </div>
  );
}

如果这一切听起来很愚蠢，我很抱歉，但我真的很想完成这项任务，继续学习。谢谢！

Answer 1

我们把这个换掉

let state = [(columns: []), (data: [])];

与：

const [data, setData] = useState({ cols: null, data: null });

要使您的仪表板组件看起来像这样：

const Dashboard = (props) => {
  const [data, setData] = useState({ cols: null, data: null });

  useEffect(() => {
    axios
      .get(`https://reqres.in/api/users?page=2`)
      .then((res) => {
        const cols = Object.keys(res.data.data[0]).map((i) => i);
        setData({ data: res.data.data, cols });
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <div className="dashboard-content">
      {data.data && <CustomTable data={data.data} cols={data.cols} />}
    </div>
  );
};

您的CustomTable元素实际上甚至不需要任何状态变量，因此我们可以使其看起来像这样：

const CustomTable = ({ data, cols }) => {
  return (
    <div>
      <Table striped bordered hover>
        <thead>
          <tr>
            {cols.map((j, i) => (
              <th key={i}>{j}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((row, i) => {
            return (
              <tr key={i}>
                <td>{row.id}</td>
                <td>{row.email}</td>
                <td>{row.first_name}</td>
                <td>{row.last_name}</td>
                <td>{row.avatar}</td>
              </tr>
            );
          })}
        </tbody>
      </Table>
    </div>
  );
};

这就是你所需要的。这里有一个沙箱供您使用：https://codesandbox.io/s/compassionate-architecture-s9dl2?file=/src/App.js