【发布时间】：2020-04-22 03:10:55
【问题描述】：
所以我开始学习使用 React Table (https://github.com/tannerlinsley/react-table)，它非常棒。但是我是 React 的中级人员（我了解基本的生命周期/道具/等等），但 hooks 对我来说相当新。
我决定在一个主要是课程的个人项目中使用它。它调用一个 API（我在 Rails 中编写）来返回一些基本的 JSON 信息。我正在使用 axios (https://github.com/axios/axios) 调用 API。
通过学习反应钩子，我将原来的 componentDidMount() 调用转换为 useEffect() 调用。下面是 Table 和 Table Container 的代码（它是用于处理传感器的应用程序，因此得名）
传感器容器：
import React, { useState, useEffect } from "react";
import axios from "axios";
import SensorCard from "./SensorCard";
import SensorTable from "./SensorTable";
import "../Styles/Components/_SensorContainer.css";
function SensorContainer() {
const [sensors, setSensors] = useState([]);
const [data, setData] = useState([])
useEffect(() => {
// GET sensor list from API
axios
.get("http://localhost:3000/api/v1/devices.json")
.then((response) => {
// handle success
console.log(response);
setSensors(response.data.data)
})
.then(() => {
console.log(sensors)
console.log(sensors[0].attributes)
console.log(name)
console.log(serialNumber)
console.log(deviceStatus)
const { name, 'serial-number':serialNumber, 'device-status':deviceStatus} = sensors[0].attributes
const data = sensors.map(sensor =>
({
id: sensor.id,
name: name,
serialNum: serialNumber,
status: deviceStatus
})
)
setData(data)
})
.catch((error) => {
console.log(error);
})
}, [sensors.length]);
// const data = React.useMemo(
// () => [
// {
// id: '1',
// name: 'TEMP001',
// serialNum: 'Temp Sensor',
// status: 'Active',
// },
// {
// id: '2',
// name: 'TEMP002',
// serialNum: 'Temp Sensor',
// status: 'Unknown',
// },
// {
// id: '3',
// name: 'HUM001',
// serialNum: 'Humidity Sensor',
// status: 'Active',
// },
// ],
// []
// )
const columns = React.useMemo(
() => [
{
Header: 'ID',
accessor: 'id', // accessor is the "key" in the data
},
{
Header: 'Name',
accessor: 'name',
},
{
Header: 'Serial Number',
accessor: 'serialNum',
},
{
Header: 'Status',
accessor: 'status',
},
],
[]
)
return (
<div>
<SensorTable columns={columns} data={data} />
</div>
)
}
export default SensorContainer;
传感器表：
import React from "react";
import {
useTable,
useGroupBy,
useFilters,
useSortBy,
useExpanded,
usePagination,
} from "react-table";
import "../Styles/Components/_SensorTable.css";
function SensorTable({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({ columns, data })
// Render the UI for your table
return (
<table {...getTableProps()} style={{ border: 'solid 1px blue' }}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th
{...column.getHeaderProps()}
style={{
borderBottom: 'solid 3px red',
background: 'aliceblue',
color: 'black',
fontWeight: 'bold',
}}
>
{column.render('Header')}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
<td
{...cell.getCellProps()}
style={{
padding: '10px',
border: 'solid 1px gray',
background: 'papayawhip',
}}
>
{cell.render('Cell')}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
)
}
export default SensorTable;
所以我遇到了一些关于此的“设计问题”：
- 人们通常如何/在哪里设置/存储列数据和“数据”
使用反应表时的数据。我假设只是一个
const列....但是数据存储在哪里？ （我通常会将其存储在 在课堂上陈述，但由于我试图使用钩子我不确定） - 我觉得我的
useEffect()无法获取 API 数据。我还遇到了一个不断运行的错误。我看到有人建议检查长度以防止这种情况发生......但这感觉很糟糕。这样做的正确方法是什么？ - 我不太清楚如何使用
React.useMemo映射我想要的数据我也找不到任何示例（显然反应表需要这个）。有什么建议吗？
我真的不确定如何正确设置它。我似乎也找不到任何使用带有 json api 获取的反应表的人的例子。
【问题讨论】：
标签： reactjs axios react-table