反应表渲染时未显示新的数据
我正在尝试使用反应表。我制作了一个使用效果挂钩,该挂钩称为异步函数,该函数在每个渲染上获取新数据,并且我将这些数据传递给了反应表。但是,当我重新加载页面时,数据就会消失并且没有显示。
我在做什么错?
import {useMemo} from 'react'
import Axios from "axios"
import { useState,useEffect } from 'react';
import { useParams,Link } from 'react-router-dom';
import "./ViewRecords.css"
import Moment from "moment"
import { useTable,useGlobalFilter } from 'react-table'
import { GlobalFilter } from './GlobalFilter';
export default function ViewRecords({}) {
const [records, setRecords] = useState([]);
useEffect(() => {
fetchRecords();
}, []);
const {username}=useParams()
const cols = [
{
accessor: "land_owner",
Header: "Owner Name"
},
{
accessor: "land_size",
Header: "Land Size (Acres)"
},
{
accessor: "crop_name",
Header: "Crop Name"
},
{
accessor: "area_planted",
Header: "Area Planted (Acres)"
},
{
accessor: "expenses",
Header: "Total Expenses (Rs)"
},
{
accessor: "sales",
Header: "Total Sales (Rs)"
},
{
accessor: "date_planted",
Header: "Date Planted",Cell: ({ value }) => {
return Moment(value).format("LL")
}
},
{
accessor: "date_harvested",
Header: "Date Harvested",Cell: ({ value }) => {
return Moment(value).format("LL")
}
},
];
const columns = useMemo(() => cols,[])
const data = useMemo(() => records, [])
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state,
setGlobalFilter,
} = useTable({
columns,
data,
}, useGlobalFilter)
const {globalFilter}=state
async function fetchRecords(){
try{
let response=await Axios.get(`http://localhost:5050/viewrecords/${username}`)
if(response.data.status==="ok"){
setRecords(response.data.data);
}
else if(response.data.status==="error"){
alert(response.data.error)
}
}
catch(err){
alert(err)
}
}
return (
<>
<div><div className="topnav">
<Link to="/home">Home</Link>
<Link to={`/Records`}>Add Records</Link>
</div></div>
<h1> {username}'s Records</h1>
<div className='item-container'>
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter}/>
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
</div>
</>
)
}
import {useState} from 'react'
export function GlobalFilter({filter,setFilter}) {
const [val,setVal]=useState(filter)
return (
<span>
Search: {""}
<input value={filter || ""}
type="text"
onChange={(e)=>{setVal(e.target.value);setFilter(e.target.value)}}
placeholder="Search by any Heading..."
/>
</span>
)
}
当我在浏览器中重新加载视图记录组件时,未显示数据:
I am trying to use react-table. I have made a useEffect hook which calls an async function which fetches new data on every render and I am passing that data to react-table. But when I reload my page, the data disappears and doesn't show.
What am I doing wrong?
import {useMemo} from 'react'
import Axios from "axios"
import { useState,useEffect } from 'react';
import { useParams,Link } from 'react-router-dom';
import "./ViewRecords.css"
import Moment from "moment"
import { useTable,useGlobalFilter } from 'react-table'
import { GlobalFilter } from './GlobalFilter';
export default function ViewRecords({}) {
const [records, setRecords] = useState([]);
useEffect(() => {
fetchRecords();
}, []);
const {username}=useParams()
const cols = [
{
accessor: "land_owner",
Header: "Owner Name"
},
{
accessor: "land_size",
Header: "Land Size (Acres)"
},
{
accessor: "crop_name",
Header: "Crop Name"
},
{
accessor: "area_planted",
Header: "Area Planted (Acres)"
},
{
accessor: "expenses",
Header: "Total Expenses (Rs)"
},
{
accessor: "sales",
Header: "Total Sales (Rs)"
},
{
accessor: "date_planted",
Header: "Date Planted",Cell: ({ value }) => {
return Moment(value).format("LL")
}
},
{
accessor: "date_harvested",
Header: "Date Harvested",Cell: ({ value }) => {
return Moment(value).format("LL")
}
},
];
const columns = useMemo(() => cols,[])
const data = useMemo(() => records, [])
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state,
setGlobalFilter,
} = useTable({
columns,
data,
}, useGlobalFilter)
const {globalFilter}=state
async function fetchRecords(){
try{
let response=await Axios.get(`http://localhost:5050/viewrecords/${username}`)
if(response.data.status==="ok"){
setRecords(response.data.data);
}
else if(response.data.status==="error"){
alert(response.data.error)
}
}
catch(err){
alert(err)
}
}
return (
<>
<div><div className="topnav">
<Link to="/home">Home</Link>
<Link to={`/Records`}>Add Records</Link>
</div></div>
<h1> {username}'s Records</h1>
<div className='item-container'>
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter}/>
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
</div>
</>
)
}
import {useState} from 'react'
export function GlobalFilter({filter,setFilter}) {
const [val,setVal]=useState(filter)
return (
<span>
Search: {""}
<input value={filter || ""}
type="text"
onChange={(e)=>{setVal(e.target.value);setFilter(e.target.value)}}
placeholder="Search by any Heading..."
/>
</span>
)
}
When I reload my View Records component in browser, the data is not displayed:
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

这可能是因为您需要添加
记录
作为USEMEMO依赖性,因为您的初始Records
是一个空数组,您的数据声明应为That's probably because you need to add
records
as a useMemo dependancy as your initialrecords
is an empty array, your data declaration should be