问题描述
晚上好! 我能够使用 react-table 从我的 API 的表行中加载数据。 编译正在运行,我可以在 App 页面上看到数据。 但是当我刷新页面时,数据已经不在了。 请看下面我的代码:
import React,{useEffect,useState,useMemo } from 'react';
import { usedispatch,useSelector } from 'react-redux';
import { getPosts } from '../../actions/post.actions';
import {useTable,useSortBy,useGlobalFilter,usePagination} from 'react-table'
import {COLUMNS} from './StructureTable'
import { AIoUtlineCaretDown,AIoUtlineCaretUp } from "react-icons/ai";
import './Table.css'
import GlobalFilter from './GlobalFilter';
const PaginationTable = () => {
// Load database mongoDb
const posts = useSelector((state) => state.postReducer)
const [loadPost,setLoadPost] = useState(true)
const dispatch = usedispatch()
useEffect(() => {
if(loadPost) {
dispatch(getPosts())
setLoadPost(false)
}
},[loadPost])
const columns = useMemo(() => COLUMNS,[])
const data = useMemo(() => posts,loadPost,[])
const tableInstance = useTable({
columns,data
},usePagination
)
const {
getTableProps,getTableBodyProps,headerGroups,page,nextPage,prevIoUsPage,canNextPage,canPrevIoUsPage,pageOptions,gotoPage,pageCount,setPageSize,prepareRow,state,setGlobalFilter,} = tableInstance
console.log(tableInstance)
const {globalFilter,pageIndex,pageSize} = state
return (
<>
<GlobalFilter filter = {globalFilter} setFilter={setGlobalFilter} />
<br/>
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup =>
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) =>
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('Header')}
<span>
{column.isSorted ? (column.isSortedDesc ? <AIoUtlineCaretDown/> : <AIoUtlineCaretUp/> ) : ''}
</span>
</th>
)}
</tr>
)}
</thead>
<tbody {...getTableBodyProps()}>
{
page.map((row) => {
prepareRow(row)
return(
<tr {...row.getRowProps()}>
{
row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})
}
</tr>
)
})
}
</tbody>
</table>
<div>
<span>
Page{' '}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong> {' '}
</span>
<span>
| Go to page: {' '}
<input type='number' defaultValue={pageIndex + 1 }
onChange={e => {
const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0
gotoPage(pageNumber)
}}
style={{width:'50px'}}
/>
</span>
<select value={pageSize} onChange={e => setPageSize(Number(e.target.value))}>
{
[10,25,50].map(pageSize => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))
}
</select>
<button onClick={() => gotoPage(0)} disabled={!canPrevIoUsPage}>{'<<'}</button>
<button onClick={() => prevIoUsPage()} disabled={!canPrevIoUsPage}>PrevIoUs</button>
<button onClick={() => nextPage()} disabled={!canNextPage}>Next</button>
<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>{'>>'}</button>
</div>
</>
)
}
export default PaginationTable
我肯定错过了一些东西:) 预先感谢您,祝您晚上愉快。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)