使用偏移限制实现分页，但不显示渲染的数据

Question

我已经尝试通过在CodeSandBox:上执行这个项目来在代码中实现分页

寻呼反应Redux

我现在正试图更进一步，在代码中实现LIMIT OFFSET，以便只提取和显示选定数量的条目，而不是整个列表。

class ListTemp extends Component{
constructor(props)
{
super(props);
this.state ={
isEdit : false,
template_id : '',
totalRecords: "",
totalPages: "",
pageLimit: "",
currentPage: "",
startIndex: "",
endIndex: "",
tempList:[]
}
}
componentDidMount(){
this.props.fetchTemps();
this.setState({totalRecords: this.props.temp_list.length})
}
componentDidUpdate(){
axios.get('/templisting',{crossDomain: true})
.then(response => {
if (response.status === 200 && response != null){
if (JSON.stringify(this.props.temp_list) != JSON.stringify(response.data)){
this.props.fetchTemps();
}            
} else {
console.log("error")
}
})         
}
onChangePage = (data) => {
console.log("onChangePage Invoked ")
this.setState({
pageLimit: data.pageLimit,
totalPages: data.totalPages,
currentPage: data.page,
startIndex: data.startIndex,
endIndex: data.endIndex
});
axios.get('/templisting_1/'+this.state.currentPage+'/'+this.state.pageLimit,{crossDomain: true})
.then(response => {
if (response.status === 200 && response != null){
console.log("Axios inside onChangePage Invoked ")
this.setState({tempList: response.data})
}
console.log("pageLimit: ",this.state.pageLimit)
console.log("currentPage: ",this.state.currentPage) 
console.log("tempList: ",this.state.tempList)
})
};
showTemp = (temp) => {
var result = null;
console.log(temp.length)
if (temp.length > 0) {
result = temp.map((temp, index) => {
return <ListMapp key={index} temp={temp} index={index} />;
});
}
return result;
};
render(){
var {
totalPages,
currentPage,
pageLimit,
startIndex,
endIndex
} = this.state;
var rowsPerPage = [];
rowsPerPage = this.state.tempList.slice(startIndex, endIndex + 1);
return(
<div className="App">
<h1>TEMP LIST</h1>
<br />
<br />
<div className="col-xs-12 box_change_pagelimit float-right">
Display
<select
className="form-control"
value={pageLimit}
onChange={(e) =>
this.setState({ pageLimit: parseInt(e.target.value) })
}>
<option value={5}>5</option>
<option value={10}>10</option>
<option value={25}>25</option>
<option value={50}>50</option>
<option value={100}>100</option>
<option value={this.props.temp_list.length}>All</option>
</select>
product
</div>
<br />
<br />
<br />
<table  className = "table table-bordered table-hover">
<thead>
<tr className = "table_style" >
<th className = "table_style">TempID</th>
<th className = "table_style">Name</th>
<th className = "table_style">CreatedOn</th>
<th className = "table_style">Action</th>
</tr>
</thead>
<tbody>
{
this.showTemp(rowsPerPage)
}
</tbody>
</table>
<br/>
<div style={{display:'inline-block'}}> 
<p>
{this.props.temp_list.length} Temp | Page {currentPage}/{totalPages}
</p>
</div> 
<br/>
<br/>
<div style={{display:'inline-block'}}>
<Pagination
totalRecords={this.props.temp_list.length}
pageLimit={pageLimit || 5}
initialPage={1}
pagesToShow={5}
onChangePage={this.onChangePage}
/>
</div>    
</div>
);
}
}

正如在onChangePage中可以观察到的那样，我在api调用中传递了偏移量和限制值作为参数，然后将这些参数传递给获取数据的sql查询。在onChangePage中axios调用的response.data中返回的数据是正确的(我做了console.log，它是所需的输出(，但当我更改页面时，它不会被映射和显示，即使它反映在this.state.tempList中。我哪里出了问题？我该如何解决？

Answer 1

不直接设置状态this.setState({tempList: response.data})

尝试以下语法this.setState({tempList:[...response.data]})