尝试使用 API 中的数据填充 BootstrapTable

Question

javascript/react 这里是新手。我正在尝试使用 api 中的数据填充 Bootstrap 中的 Table。我制作了两个组件 - Dashboard.js 和 CustomTable.js，它们都可以正常工作。据我所知，我需要在 Dashboard 组件上进行 API 调用——我已经使用 useEffect 和 axios 完成了该操作。在 CustomTable.js 上，我需要对列和数据使用 useState。我想让我的 table 动态，包括行和列。看看我的 Dashboard.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>
  );
};

接下来，我得到了我的 CustomTable.js 功能组件，我尝试从我的 Parent(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 });

使您的 Dashboard 组件看起来像这样：

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

尝试使用 API 中的数据填充 BootstrapTable

Trying to populate BootstrapTable with the data from the API

reactjs

bootstrap-4

axios

react-props

react-functional-component