在 React 中渲染 axios 响应 Bootstrap Table

Question

抱歉，我知道这是一个新手问题，但我希望有人能提供帮助。

我正在学习 React 并有一个组件 todos-list.component.js，它显示 axios 请求的结果并在 table 中呈现，一切都很好（除了我遇到的一些样式问题暂时不用担心):

import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

const Todo = (props) => (
  <tr>
    <td className={props.todo.todo_completed ? "completed" : ""}>
      {props.todo.todo_description}
    </td>
    <td className={props.todo.todo_completed ? "completed" : ""}>
      {props.todo.todo_responsible}
    </td>
    <td className={props.todo.todo_completed ? "completed" : ""}>
      {props.todo.todo_priority}
    </td>
    <td className={props.todo.todo_completed ? "completed" : ""}>
      {props.todo.todo_cardnumber}
    </td>
    <td className={props.todo.todo_completed ? "completed" : ""}>
      {props.todo.todo_playername}
    </td>
    <td className={props.todo.todo_completed ? "completed" : ""}>
      {props.todo.todo_teamname}
    </td>
    <td>
      <Link to={"/edit/" + props.todo._id}>Edit</Link>
    </td>
  </tr>
);

export default class TodosList extends Component {
  constructor(props) {
    super(props);
    this.state = { todos: [] };
  }

  componentDidMount() {
    axios
      .get(
        "https://webhooks.mongodb-realm.com/api/client/v2.0/app/todo-psiro/service/ToDo/incoming_webhook/todos"
      )
      .then((response) => {
        this.setState({ todos: response.data });
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  componentDidUpdate() {
    axios
      .get(
        "https://webhooks.mongodb-realm.com/api/client/v2.0/app/todo-psiro/service/ToDo/incoming_webhook/todos"
      )
      .then((response) => {
        this.setState({ todos: response.data });
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  todoList() {
    return this.state.todos.map(function (currentTodo, i) {
      return <Todo todo={currentTodo} key={i} />;
    });
  }

  render() {
    return (
      <div>
        <h3>Todos List</h3>
        <table className="table table-striped" style={{ marginTop: 20 }}>
          <thead>
            <tr>
              <th>Description</th>
              <th>Team Name</th>
              <th>Player Name</th>
              <th>Card Number</th>
              <th>Responsible</th>
              <th>Priority</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>{this.todoList()}</tbody>
        </table>
      </div>
    );
  }
}

然后我有一个不同的组件 table.component.js 将静态数据呈现到 React Bootstrap Table (https://react-bootstrap-table.github.io/react-bootstrap-table2/) 并且再次工作正常：

import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

const data = [
  {
    id: 0,
    name: "banana",
    price: "0.25",
  },
  {
    id: 1,
    name: "spinach",
    price: "4.49",
  },
  {
    id: 2,
    name: "icecream",
    price: "4.99",
  },
  {
    id: 3,
    name: "bagel",
    price: "1.19",
  },
  {
    id: 4,
    name: "fish",
    price: "10.00",
  },
];

const columns = [
  {
    dataField: "id",
    hidden: true,
  },
  {
    dataField: "name",
    text: "Grocery",
    sort: true,
  },
  {
    dataField: "price",
    text: "Price",
    formatter: (cell, row) => {
      return <p>${cell}</p>;
    },
    sort: true,
    sortFunc: (a, b, order, dataField, rowA, rowB) => {
      const numA = parseFloat(a);
      const numB = parseFloat(b);
      if (order === "asc") {
        return numB - numA;
      }
      return numA - numB; // desc
    },
  },
];

const BasicTable = () => {
  return (
    <BootstrapTable
      keyField="id"
      data={data}
      columns={columns}
      striped
      hover
      condensed
      pagination={paginationFactory({})}
    />
  );
};

export default BasicTable;

但是我想做的是将这些结合起来，以便通过 React Bootstrap Table 呈现 axios GET 请求的结果。有人可以帮忙吗？

Answer 1

在你的 componentDidMount

apiCall

仅在数据到达时显示table。
将您的 todo 对象的键映射到列中的数据字段。

您可以查看工作示例here

import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";


const columns = [
  {
    dataField: "todo_id",
    text: "id",
  },
  {
    dataField: "todo_description",
    text: "description",
    sort: true,
  },
   {
    dataField: "todo_priority",
    text: "priority",
    sort: true,
  },
];

const url = 'https://webhooks.mongodb-realm.com/api/client/v2.0/app/todo-psiro/service/ToDo/incoming_webhook/todos'

class BasicTable extends React.Component {
  state = { data: null };

  async componentDidMount() {
    const { data } = await axios.get(url)
    this.setState({ data });
  }

  render() {
    if (!this.state.data) return null;
    console.log(this.state.data);
    
    return (
      <BootstrapTable
        keyField="id"
        data={this.state.data}
        columns={columns}
        striped
        hover
        condensed
        // pagination={paginationFactory({})}
      />
    ) 
  }
}


export default BasicTable;

Answer 2

我建议使用函数组件，因为 React 生态系统正在朝着这种方法发展。

您可以使用 useState 挂钩管理状态，并使用 useEffect 挂钩进行 API 调用。

像这样：

import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import React, {
  useState,
  useEffect
} from "react";
import {
  Link
} from "react-router-dom";
import axios from "axios";

const columns = [{
    dataField: "_id",
    hidden: true
  },
  {
    dataField: "todo_description",
    text: "Description",
    sort: true
  },
  {
    dataField: "todo_teamname",
    text: "Team Name",
    sort: true
  },
  {
    dataField: "todo_playername",
    text: "Player Name",
    sort: true
  },
  {
    dataField: "todo_cardnumber",
    text: "Card Number",
    sort: true
  },
  {
    dataField: "todo_responsible",
    text: "Responsible",
    sort: true
  },
  {
    dataField: "todo_priority",
    text: "Priority",
    sort: true
  },
  {
    dataField: "action",
    text: "Action"
  }
];

const TableWithData = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios
      .get(
        "https://webhooks.mongodb-realm.com/api/client/v2.0/app/todo-psiro/service/ToDo/incoming_webhook/todos"
      )
      .then(response => {
        setData(response.data);
      })
      .catch(function(error) {
        console.log(error);
      });
  }, []);

  return ( <
    BootstrapTable keyField = "id"
    data = {
      data
    }
    columns = {
      columns
    }
    striped hover condensed pagination = {
      paginationFactory()
    }
    />
  );
};

export default TableWithData;

看看 TableWithData 组件。

Here's a Working Sample StackBlitz for your ref.

在 React 中渲染 axios 响应 Bootstrap Table

Rendering axios response in React Bootstrap Table

javascript

reactjs

axios

react-bootstrap-table