前の状態が新しい状態でレンダリング（複製）されています

Question

私のコンポーネントがdiffだけでなく以前の小道具と新しい小道具の両方をレンダリングする理由を理解できません。

は、例えば、それはレンダリング：

[[1, 2, 3, 4, 5]] 
[[6, 7, 8, 9, 10]] 
[[1, 2, 3, 4, 5]] 
[[6, 7, 8, 9, 10]] 
[[16, 57, 8, 19, 5]] 

の代わりにちょうど：

[[1, 2, 3, 4, 5]] 
[[6, 7, 8, 9, 10]] 
[[16, 57, 8, 19, 5]] 

私の主なコンポーネント：

class AsyncApp extends Component { 
    constructor(props) { 
    super(props) 
    } 

    lookForUpdate() { 
    // this function hits a endpoint every 10 sec. 
    setInterval(() => { 
     this.props.dispatch(fetchDataForReals()) 
     }, 10000) 
    } 

    componentDidMount() { 
    this.props.dispatch(fetchDataForReals()) 
    this.lookForUpdate() 
    } 

    render() { 
    const { graphData } = this.props; 

    return (
     <div> 
     <div>hello</div> 
     <DataGraph graphData={graphData} /> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    let graphData = state.payment.graphDatas 
    return { 
    graphData 
    } 
} 

export default connect(mapStateToProps)(AsyncApp) 

私の他の成分：

import React, { Component } from 'react' 

export default class DataGraph extends Component { 
    constructor(props) { 
    super(props) 
    } 

    shouldComponentUpdate(nextProps) { 
    return nextProps.graphData !== this.props.graphData 
    } 

    render() { 
    return (
     <div>{this.props.graphData.map(function(datas){ 
     return datas.map(function(data, index){ 
      return <li key={index}>{data.series}</li> 
     }) 
     })}</div> 
    ) 
    } 
} 

export default DataGraph; 

マイaction.js

function requestDataArray() { 
    return { 
    type: REQUEST_DATA 
    } 
} 

function recieveDataArray(data) { 
    return { 
    type: RECIEVE_DATA, 
    data: data.map(child => child), 
    receivedAt: Date.now() 
    } 
} 


function fetchData() { 
    return dispatch => { 
    dispatch(requestDataArray()) 
    return fetch('//localhost:3000/api/v1/data', { 
     mode: 'no-cors' 
    }).then(function(data){ 
     return data.json() 
    }).then(function(data){ 
     dispatch(recieveDataArray(data)) 
    }) 
    } 
} 

export function fetchDataForReals() { 
    return (dispatch) => { 
    return dispatch(fetchData()) 
    } 
} 

マイレデューサー：

return [ 
    ...state, action.data 
] 

あなたはクローンを返すべきである：

const initialState = { 
    graphDatas: [], 
    friendsList : {}, 
    comments: [] 
} 

function addData(state = initialState.graphDatas, action) { 
    switch(action.type) { 
    case 'RECIEVE_DATA': 
     var clone = _.cloneDeep(state); 
     var resultPopOff = clone.pop() 
     let stateResult = _.isEqual(resultPopOff, action.data) 
     if (stateResult) { 
     return state 
     } else { 
     return [ 
      ...state, action.data 
     ] 
     } 
    default: 
     return state; 
    } 
} 

const payment = (state = initialState, action) => { 
    switch(action.type) { 
    default: 
     return { 
     graphDatas: addData(state.graphDatas, action) 
     } 
    } 
} 

const rootReducer = combineReducers({ 
    payment, routing: routerReducer 
}) 

export default rootReducer 

Answer 1

私はあなたの減速でこれをやっているところだと思いますpop()エフェクト：

return [ 
    ...clone, action.data 
]