Reactjs React道具会自动更新

我正在制作一个分页组件，而传递给这个分页组件的道具有问题。元素道具正在自动更新，因此我无法使用componentWillReceiveProps更新我的组件

下面是我的父组件呈现和对Paginate组件的回调：

class AlarmManagement extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            alarms: undefined,
            nameIsOrdered: false,
            codeIsOrdered: true,
            priorityIsOrdered: false,
            alarmsPaginate: undefined,
        }
        this.orderByName = this.orderByName.bind(this)
        this.orderByCode = this.orderByCode.bind(this)
        this.orderByPriority = this.orderByPriority.bind(this)
        this.getAlarms = this.getAlarms.bind(this)
        this.getAlarmsPaginate = this.getAlarmsPaginate.bind(this)
    }

    componentWillMount(){
        this.getAlarms()
    }

    getAlarms(){
        $.ajax({
            type: 'GET',
            url: '/api/alarm-event-types/',
            headers: { 'Authorization': "Token " + localStorage.token },
            success: (alarms) => {
                this.setState({
                    alarms: alarms.sort((a, b) => a.code - b.code)
                })

            },
            error: (fail) => console.log(fail)
        })
    }

    getAlarmsPaginate(page, amount) {
        const newAlarms = this.state.alarms
        this.setState({ alarmsPaginate: newAlarms.slice(page, amount) });

    }

    componentWillReceiveProps({emergency}){
        if(emergency !== undefined && emergency !== null){
            let updateList = [],
                shouldUpdate = false
            emergency.forEach((el, index) => {
                if(el.update){
                    updateList.push(index)
                }
                if(el.update == "alarm"){
                    shouldUpdate = true
                }
            })
            if(shouldUpdate){
                this.getAlarms()
            }
            updateList.forEach((el) => {
                if(this.props.clearList){
                    this.props.clearList(el)
                }
            })
        }
    }

    orderByName(){
        let alarms = this.state.alarms
        if(this.state.nameIsOrdered === true){
            this.setState({
                alarms: alarms.sort((a, b) => {
                    let nameA = `${a.name.toUpperCase()}`, 
                        nameB = `${b.name.toUpperCase()}`
                    if (nameA > nameB) {
                        return 1;
                    }
                    if (nameA < nameB) {
                        return -1;
                    }

                    return 0;
                }),
                nameIsOrdered: false,
                codeIsOrdered: false,
                priorityIsOrdered: false
            })
        }
        else{
            this.setState({
                alarms: alarms.sort((a, b) => {
                    let nameA = `${a.name.toUpperCase()}`, 
                        nameB = `${b.name.toUpperCase()}`
                    if (nameB > nameA) {
                        return 1;
                    }
                    if (nameB < nameA) {
                        return -1;
                    }

                    return 0;
                }),
                nameIsOrdered: true,
                codeIsOrdered: false,
                priorityIsOrdered: false
            })
        }
    }

    orderByCode(){
        let alarms = this.state.alarms
        if(this.state.codeIsOrdered === true){
            this.setState({
                alarms: alarms.sort((a, b) => b.code - a.code),
                codeIsOrdered: false,
                nameIsOrdered: false,
                priorityIsOrdered: false
            })
        }
        else{
            this.setState({
                alarms: alarms.sort((a, b) => a.code - b.code),
                codeIsOrdered: true,
                nameIsOrdered: false,
                priorityIsOrdered: false
            })
        }
    }

    orderByPriority(){
        let alarms = this.state.alarms
        if(this.state.priorityIsOrdered === true){
            this.setState({
                alarms: alarms.sort((a, b) => b.priority - a.priority),
                nameIsOrdered: false,
                codeIsOrdered: false
            })
        }
        else{
            this.setState({
                alarms: alarms.sort((a, b) => a.priority - b.priority),
                nameIsOrdered: false,
                codeIsOrdered: false
            })
        }
        this.setState(prevState => ({
                priorityIsOrdered: !prevState.priorityIsOrdered,
        }))
    }

    render(){
        const alarms = this.state.alarms,
              alarmsPaginate = this.state.alarmsPaginate;
        return(
            this.props.user.groups == 1 ? (
                <div className="contactto-middle-content">
                    <ManagementMenu/>
                    <div className="management-content">
                        <div className="list-management-subtitle">ALARMES</div>
                        <button type="button" className="btn btn--save-attend-or-add-someone btn--color-tecno" onClick={() => browserHistory.push('/app/alarms/form/add')}>
                            <div><span className="btn--bold">+ ADICIONAR</span> ALARME</div>
                        </button>
                        {alarms && 
                            <div className="list-table">
                                <Paginate outerClass="paginate-wrapper" filterElements={this.getAlarmsPaginate} maxElements={5} elements={alarms} />
                                <div className="list-table-header">
                                    <div className="left list-table--200"><span className="icons-order clickable" onClick={this.orderByName}>Nome<Order width="15" height="10"/></span></div>
                                    <div className="left list-table--200"><span className="icons-order clickable" onClick={this.orderByCode}>Código<Order width="15" height="10"/></span></div>
                                    <div className="left list-table--200"><span className="icons-order clickable" onClick={this.orderByPriority}>Prioridade<Order width="15" height="10"/></span></div>
                                    <div className="list-table-body-column--action--2icons"></div>
                                </div>

                                    <div className="list-table-body scroll">
                                        {alarmsPaginate && alarmsPaginate.map((alarm) =>
                                            <AlarmRow key={alarm.code} alarm={alarm} getAlarms={this.getAlarms} channelId={this.props.channelId} iconDetail={this.refs["iconDetail"]}/>
                                        )}
                                    </div>

                            </div>
                        }

                    </div>
                </div>
            ):
                <div className="error">Página não pode ser acessada, pois você não é um administrador</div>
        )
    }
}

export default AlarmManagement

export default class Paginate extends React.Component{
    constructor(props){
        super(props)

        this.state = {
            pagesNumber: undefined,
            elements: undefined,
            elementsNumber: undefined,
            startNumber: undefined,
            endNumber: undefined,
            pos: undefined,
        }

        this.nextList = this.nextList.bind(this)
        this.previousList = this.previousList.bind(this)
    }

    previousList(){
        if(this.state.pos > 1){
            let pos = this.state.pos - 1
            this.changePage(pos)
        }

    }

    nextList(){
        if(this.state.pos < this.state.pagesNumber){
            let pos = this.state.pos + 1
            this.changePage(pos)
        }

    }

    changePage(pos){
        const newStartNumber = pos === 1 ? 0 : this.props.maxElements * (pos - 1);
        const newEndNumber = this.props.maxElements * pos > this.state.elementsNumber ? this.state.elementsNumber : this.props.maxElements * pos;
        this.props.filterElements(newStartNumber, newEndNumber);
        this.setState({
            pos: pos,
            startNumber: newStartNumber,
            endNumber: newEndNumber,
        });
    }

    componentWillReceiveProps(nextProps){
        console.log(nextProps.elements != this.props.elements ? 'different' : 'equal')
    }

    componentWillMount(){
        this.setState((prevState, props) => ({
            pagesNumber: props.elements ? Math.ceil(props.elements.length / props.maxElements) : 0,
            elements: props.elements,
            elementsNumber: props.elements.length,
            startNumber: 1,
            endNumber: props.maxElements,
            pos: 1,
        }));
        if(this.props.filterElements){
            this.props.filterElements(0, this.props.maxElements)
        }
    }

    render(){
        const elementsNumber = this.state.elementsNumber,
              startNumber = this.state.startNumber,
              endNumber = this.state.endNumber;
        return(
            <div className={this.props.outerClass}>
                {elementsNumber > this.props.maxElements &&
                <div className="left contactto-100">
                    {elementsNumber && <span className="left">{`${startNumber === 0 ? 1 : startNumber}-${endNumber} de ${elementsNumber}`}</span>}
                    <span className="paginate-arrow paginate-arrow-left" onClick={this.previousList}></span>
                    <span className="paginate-arrow paginate-arrow-right" onClick={this.nextList}></span>
                </div>
                }
            </div>
        )
    }
}

Paginate.defaultProps = {
    outerClass: 'paginate-wrapper'
}

Paginate.propTypes = {
    outerClass: React.PropTypes.string,
    filterElements: React.PropTypes.func.isRequired,
    maxElements: React.PropTypes.number.isRequired,
    elements: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
}

类AlarmManagement扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
警报：未定义，
姓名顺序：假，
代码排序：正确，
优先顺序：错误，
alarmsPaginate:未定义，
}
this.orderByName=this.orderByName.bind（this）
this.orderByCode=this.orderByCode.bind（this）
this.orderByPriority=this.orderByPriority.bind（this）
this.getAlarms=this.getAlarms.bind（this）
this.getAlarmsPaginate=this.getAlarmsPaginate.bind（this）
}
组件willmount（）{
这是getAlarms（）
}
getAlarms（）{
$.ajax({
键入：“GET”，
url:“/api/报警事件类型/”，
标头：{“授权”：“令牌”+localStorage.Token}，
成功：（警报）=>{
这是我的国家({
报警：报警.排序（（a，b）=>a.code-b.code）
})
},
错误：（失败）=>console.log（失败）
})
}
getAlarmsPaginate（第页，金额）{
const newAlarms=this.state.alarms
this.setState（{alarmsPaginate:newAlarms.slice（page，amount）}）；
}
组件将接收道具（{emergency}）{
如果（紧急情况！==未定义和紧急情况！==空）{
让updateList=[]，
shouldUpdate=false
紧急情况。forEach（（el，索引）=>{
如果（el.update）{
updateList.push（索引）
}
如果（el.update==“报警”）{
shouldUpdate=true
}
})
如果（应该更新）{
这是getAlarms（）
}
updateList.forEach（（el）=>{
如果（此.props.clearList）{
此.props.clearList（el）
}
})
}
}
orderByName（）{
让报警=this.state.alarms
if（this.state.nameisorred==true）{
这是我的国家({
报警：报警。排序（（a，b）=>{
设nameA=`${a.name.toUpperCase（）}`，
nameB=`${b.name.toUpperCase（）}`
如果（名称A>名称B）{
返回1；
}
if（nameA{
设nameA=`${a.name.toUpperCase（）}`，
nameB=`${b.name.toUpperCase（）}`
如果（nameB>nameA）{
返回1；
}
if（nameBb.code-a.code），
代码顺序：错误，
姓名顺序：假，
优先顺序：错误
})
}
否则{
这是我的国家({
报警：报警.排序（（a，b）=>a.code-b.code），
代码排序：正确，
姓名顺序：假，
优先顺序：错误
})
}
}
orderByPriority（）{
让报警=this.state.alarms
if（this.state.priorityIsOrdered==true）{
这是我的国家({
报警：报警.sort（（a，b）=>b.priority-a.priority），
姓名顺序：假，
代码顺序：false
})
}
否则{
这是我的国家({
报警：报警。排序（（a，b）=>a.priority-b.priority），
姓名顺序：假，
代码顺序：false
})
}
this.setState（prevState=>({
priorityIsOrdered:！prevState.priorityIsOrdered，
}))
}
render（）{
常量报警=this.state.alarms，
alarmsPaginate=this.state.alarmsPaginate；
返回(
this.props.user.groups==1(
惊慌
browserHistory.push（'/app/alarms/form/add'）}>
+阿迪西奥纳警报
{警报&&
诺姆
科迪戈
普里奥里达德
{alarmsPaginate&&alarmsPaginate.map（（报警）=>
)}
}
):
Página não pode ser acessada，pois vocênãoéum行政官
)
}
}
导出默认值
changePage(pos){
        this.state.startNumber = pos === 1 ? 0 : this.props.maxElements * (pos - 1);
        this.state.endNumber = this.props.maxElements * pos > this.state.elementsNumber ? this.state.elementsNumber : this.props.maxElements * pos;
        this.props.filterElements(this.state.elements, this.state.startNumber, this.state.endNumber);
        this.setState({ 
            pos: pos,
            startNumber: this.state.startNumber,
            endNumber: this.state.endNumber
        });
    }

changePage(pos){
        const newStartNumber = pos === 1 ? 0 : this.props.maxElements * (pos - 1);
        const newEndNumber = this.props.maxElements * pos > this.state.elementsNumber ? this.state.elementsNumber : this.props.maxElements * pos;
        this.props.filterElements(this.state.elements, newStartNumber, newEndNumber);
        this.setState({
            pos: pos,
            startNumber: newStartNumber,
            endNumber: newEndNumber
        });
    }

constructor(props){
        super(props)

        this.state = {
            elements: this.props.elements,
            ...
        }
        ...
    }

changePage(pos){
        const newStartNumber = pos === 1 ? 0 : this.props.maxElements * (pos - 1);
        const newEndNumber = this.props.maxElements * pos > this.props.elements.length ? this.props.elements.length : this.props.maxElements * pos;
        this.props.filterElements(this.props.elements, newStartNumber, newEndNumber);
        this.setState({
            pos: pos,
            startNumber: newStartNumber,
            endNumber: newEndNumber
        });
    }

changePage(pos){
        const newStartNumber = pos === 1 ? 0 : this.props.maxElements * (pos - 1);
        const newEndNumber = this.props.maxElements * pos > this.props.elements.length ? this.props.elements.length : this.props.maxElements * pos;
        this.props.filterElements(newStartNumber, newEndNumber);
        this.setState({
            pos: pos,
            startNumber: newStartNumber,
            endNumber: newEndNumber
        });
    }

getAlarmsPaginate(alarms, page, amount) {
    this.state.alarmsPaginate = alarms.slice(page, amount)
    this.setState({ alarmsPaginate: this.state.alarmsPaginate })

}

getAlarmsPaginate(page, amount) {
    const newAlarmsPaginate = this.state.alarms.slice(page, amount);
    this.setState({ alarmsPaginate: newAlarmsPaginate });
}

class Parent extends React.Component {
  constructor() {
    super();

    // our parent maintains an array of all elements in its state,
    // as well as the current page, and the number of items per page.
    // getSampleData can be seen in the fiddle - it just makes an array
    // of objects for us to render
    this.state = {
      allElements: getSampleData(),
      page: 1,
      numPerPage: 10
    };
  }


  // we pass this function as a prop to our Paginate component to allow
  // it to update the state of Parent
  setPage(pageNum) {
    this.setState({
        page: pageNum
    });
  }

  render() {   

    // get the appropriate elements from our own state   
    const firstItem = (this.state.page - 1) * this.state.numPerPage;
    const lastItem = this.state.page * this.state.numPerPage;
    const elementRender = 
      this.state.allElements
      .slice(firstItem, lastItem)
      .map(element => {
        return (
          <div key={element.itemNumber}>{element.itemName}</div>
        );
    });

    // numberOfElements, numPerPage and the setPage function from
    // Parent's state are passed
    // to the paginate component as props
    return (
        <div>
        <Paginate 
          numberOfElements={this.state.allElements.length} 
          numPerPage={this.state.numPerPage}
          setPage={this.setPage.bind(this)}
          />
        {elementRender}
      </div>
    );
  }
}

class Paginate extends React.Component {
    render() {
    const numberOfButtons = Math.ceil(this.props.numberOfElements / this.props.numPerPage);
    const buttons = [];

    // make a first page button
    buttons.push(<button key={0} onClick={() => this.props.setPage(1)}>First Page</button>);


    let i = 0;

    // add a button for each page we need
    while (i < numberOfButtons) {
        const page = ++i;
        buttons.push(
        <button 
            key={i} 
          onClick={() => this.props.setPage(page)}
        >
          Page {i}
        </button>
      );
    }

    // add a last page button
    buttons.push(<button key={i+1} onClick={() => this.props.setPage(i)}>Last Page</button>);
    return (
        <div>
        {buttons}
      </div>
    );
  }
}