Reactjs 当我更新状态时，componentDidUpdate中的prevProps和当前props是相同的

我在我的表格中添加了排序功能。当我排序或删除一个元素时，有两个数组是相同的，一个是PrevProp，另一个是CurrentProp。我检查了我的代码，发现错误来自下面的代码

这是我的Pagination.js代码

import React from "react"

const propTypes = {
    // items: React.PropTypes.array.isRequired,
    // onChangePage: React.PropTypes.func.isRequired,
    // initialPage: React.PropTypes.number    
}

const defaultProps = {
    initialPage: 1
}

class Pagination extends React.Component {
    constructor(props) {
        super(props);
        this.state = { pager: {} };
    }

    componentWillMount() {
        //set page if items array isn't empty
        if (this.props.items && this.props.items.length) {
            this.setPage(this.props.initialPage);
     }
  }

    // componentDidUpdate(prevProps,prevState) {

    //     if (this.props.items !== prevProps.items) {
    //         this.setPage(this.props.initialPage);     
    //     }



    // }
    componentWillReceiveProps (newProps) {
          if (this.props.items !== newProps.items) {
            this.setPage(this.props.initialPage);     
        }  
    }

    setPage(page) {

        var items = this.props.items;
        var pager = this.state.pager;
        if (page < 1 || page > pager.totalPages) {
            return;
        }
        // get new pager object for specified page
        pager = this.getPager(items.length, page);


        // get new page of items from items array
        var pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1);

        // update state
        this.setState({ pager: pager });

        // call change page function in parent component

        this.props.onChangePage(pageOfItems);

    }

    getPager(totalItems, currentPage, pageSize) {
        // default to first page
        currentPage = currentPage || 1;

        // default page size is 10
        pageSize = pageSize || 10;

        // calculate total pages
        var totalPages = Math.ceil(totalItems / pageSize);

        var startPage, endPage;
        if (totalPages <= 10) {
            // less than 10 total pages so show all
            startPage = 1;
            endPage = totalPages;
        } else {
            // more than 10 total pages so calculate start and end pages
            if (currentPage <= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 >= totalPages) {
                startPage = totalPages - 9;
                endPage = totalPages;
            } else {
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }

        }

        // calculate start and end item indexes
        var startIndex = (currentPage - 1) * pageSize;
        var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

        // create an array of pages to ng-repeat in the pager control
        var pages = [...Array((endPage + 1) - startPage).keys()].map(i => startPage + i);

        // return object with all pager properties required by the view
        return {
            totalItems: totalItems,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };
    }

    render() { 

        var pager = this.state.pager;

        if (!pager.pages || pager.pages.length <= 1) {
            // don't display pager if there is only 1 page
            return null;
        }

        return (
            <ul className="pagination">
                <li className={pager.currentPage === 1 ? 'disabled' : ''}>
                    <a onClick={() => this.setPage(1)}>First</a></li>
                <li className={pager.currentPage === 1 ? 'disabled' : ''}>
                    <a onClick={() => this.setPage(pager.currentPage - 1)}>Previous</a>
                </li>
                {pager.pages.map((page, index) =>
                <li key={index} className={pager.currentPage === page ? 'active' : ''}>
                    <a onClick={() => this.setPage(page)}>{page}</a>
                </li>
                )}
                <li className={pager.currentPage === pager.totalPages ? 'disabled' : ''}>
                    <a onClick={() => this.setPage(pager.currentPage + 1)}>Next</a>
                </li>
                <li className={pager.currentPage === pager.totalPages ? 'disabled' : ''}>
                    <a onClick={() => this.setPage(pager.totalPages)}>Last</a>
                </li>
            </ul>
        );
    }
}

Pagination.propTypes = propTypes;
Pagination.defaultProps = defaultProps;

export default Pagination

从“React”导入React
常量属性类型={
//项目：React.PropTypes.array.isRequired，
//onChangePage:React.PropTypes.func.isRequired，
//初始页面：React.PropTypes.number
}
const defaultProps={
首页：1
}
类分页扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={pager:{}；
}
组件willmount（）{
//如果项目数组不为空，则设置页面
if（this.props.items&&this.props.items.length）{
this.setPage（this.props.initialPage）；
}
}
//componentDidUpdate（prevProps、prevState）{
//if（this.props.items！==prevProps.items）{
//this.setPage（this.props.initialPage）；
//     }
// }
组件将接收道具（新道具）{
if（this.props.items！==newProps.items）{
this.setPage（this.props.initialPage）；
}  
}
设置页面（第页）{
var items=this.props.items；
var pager=this.state.pager；
如果（第<1页| |页>寻呼机总页数）{
返回；
}
//获取指定页面的新寻呼机对象
pager=this.getPager（items.length，page）；
//从项目数组中获取项目的新页面
var pageOfItems=items.slice（pager.startIndex，pager.endIndex+1）；
//更新状态
this.setState（{pager:pager}）；
//在父组件中调用更改页函数
此.props.onChangePage（pageOfItems）；
}
getPager（totalItems、currentPage、pageSize）{
//默认为第一页
当前页面=当前页面| | 1；
//默认页面大小为10
pageSize=pageSize | | 10；
//计算总页数
var totalPages=Math.ceil（totalItems/pageSize）；
var起始页，结束页；
if（总页数起始页+i）；
//返回具有视图所需的所有寻呼机属性的对象
返回{
totalItems:totalItems，
currentPage:currentPage，
pageSize:pageSize，
totalPages:totalPages，
起始页：起始页，
endPage:endPage，
startIndex:startIndex，
endIndex:endIndex，
页数：页数
};
}
render（）{
var pager=this.state.pager；
如果（！pager.pages | | pager.pages.length您有多个实例正在更改状态。在react中，您的状态，否则无法比较前后，因为前后是相同的。例如，您有以下代码：

handleAddEvent = (one,two,three,four) => {
  let products = this.state.exampleItems;
  let count = + new Date();
  let item = {
    id: count,
    name: one,
    price: two,
    qty: three,
    category: four,
  }
  products.push(item);
  this.setState({ exampleItems:products }); 
}

在开始进行修改之前，需要复制状态。例如，将函数的第一行替换为：

let products = [...this.state.exampleItems];

注意：此问题存在于多个地方，而不仅仅是HandLeadEvent。我将以示例的形式展示该函数。您可能需要修复所有您正在改变状态的情况，以解决此问题。
共享
setPage
请和
项
我们需要查看排序或删除的代码。很可能，您正在改变状态g使用旧值，而不是创建新值。@Quirimo这里是code@NicholasTower这是代码谢谢你Nicholas，它工作了，但我遇到了另一个错误，我单击了排序、删除和编辑按钮，所有操作都正常，但在第二次单击时它工作了。。
let products = [...this.state.exampleItems];