Javascript 在React引导表中呈现axios响应

对不起，我知道这是个新手问题，但我希望有人能帮上忙

我正在学习React并拥有一个组件

todos list.component.js

，它显示axios请求的结果并在表中呈现，一切都很好（除了一些我目前不太在意的样式问题）：

然而，我想做的是将它们结合起来，以便通过React引导表呈现axios GET请求的结果。有人能帮忙吗

在组件中执行

apiCall

仅在数据到达时显示表格

将todo对象的键映射到列中的数据字段

您可以检查工作示例

从“下一步反应引导表”导入引导可选项；
从“react-bootstrap-table2-paginator”导入分页工厂；
从“React”导入React，{Component}；
从“react router dom”导入{Link}；
从“axios”导入axios；
常量列=[
{
数据字段：“待办事项id”，
文本：“id”，
},
{
数据字段：“待办事项描述”，
文字：“说明”，
排序：对，
},
{
数据字段：“待办事项优先级”，
正文：“优先权”，
排序：对，
},
];
常量url=https://webhooks.mongodb-realm.com/api/client/v2.0/app/todo-psiro/service/ToDo/incoming_webhook/todos'
类BasicTable扩展了React.Component{
状态={data:null}；
异步组件didmount（）{
const{data}=wait axios.get（url）
this.setState（{data}）；
}
render（）{
如果（！this.state.data）返回null；
console.log（this.state.data）；
返回(
) 
}
}
可导出默认值；

我建议使用功能组件，因为React ecysystem正朝着这个方向发展

您可以使用

useState

钩子来管理状态，使用

useffect

钩子来进行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;

从“下一步反应引导表”导入引导可选项；
从“react-bootstrap-table2-paginator”导入分页工厂；
进口反应{
useState，
使用效果
}从“反应”；
进口{
链接
}从“反应路由器dom”；
从“axios”导入axios；
常量列=[{
数据字段：“\u id”，
隐藏：真的
},
{
数据字段：“待办事项描述”，
文字：“说明”，
排序：正确
},
{
数据字段：“todo_团队名称”，
文本：“团队名称”，
排序：正确
},
{
数据字段：“todo_playername”，
文字：“玩家姓名”，
排序：正确
},
{
数据字段：“todo_卡号”，
文字：“卡号”，
排序：正确
},
{
数据字段：“todo_responsible”，
案文：“负责”，
排序：正确
},
{
数据字段：“待办事项优先级”，
正文：“优先权”，
排序：正确
},
{
数据字段：“操作”，
案文：“行动”
}
];
const TableWithData=（）=>{
const[data，setData]=useState（[]）；
useffect（（）=>{
axios
.得到(
"https://webhooks.mongodb-realm.com/api/client/v2.0/app/todo-psiro/service/ToDo/incoming_webhook/todos"
)
。然后（响应=>{
setData（response.data）；
})
.catch（函数（错误）{
console.log（错误）；
});
}, []);
报税表（<
BootstrapTable keyField=“id”
数据={
数据
}
列={
柱
}
分条悬停压缩分页={
分页工厂（）
}
/>
);
};
导出默认TableWithData；

查看带有数据的

表格
组件

这里有一个供您参考

显示此组件的目的是什么
todos list.component.js
？您好。它只是（以表格形式）显示所有待办事项。您是否试图通过表中的api显示TODO？是的，api调用在第一个代码块中-例如“谢谢”，将检查此内容并尽快回复您。谢谢。您是否知道我如何将该表中的某些项目设置为链接（从
RowPureContent
上可用的道具中获取值）？当teamname值为manchester时，我希望能够链接到一个页面（例如manchester）
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;

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;

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;