이전 상태가 새 상태로 렌더링 (복제)됩니다.

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()) 
    } 
} 

내 감속기 :

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

나는 당신이 당신의 감속기에이 일을하고 어디 생각 :

는

return [ 
    ...state, action.data 
] 

당신은 복제를 반환해야 당신 pop() 에드 오프 :

return [ 
    ...clone, action.data 
]