Question

我无法弄清楚为什么我的组件会渲染前一个道具和新道具，而不仅仅是差异。

例如，它呈现：

.myClass#firstID, .myClass#secondID {
    background-color: #bbbbbb;
}

.myClass#firstID:hover, .myClass#secondID:hover {
    background-color: #000;
}   

#myID.firstClass, #myID.secondClass {
    background-color: #123456;
}

#myID.firstClass:hover, #myID.secondClass:hover{
    background-color: #111;
}

而不仅仅是：

[[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)

我的动作.js

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;

我的减速机：

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

Answer 1

我想你在减速机里做了什么：

return [
  ...state, action.data
]

您应该返回pop()关闭的克隆：

return [
  ...clone, action.data
]

以前的状态是使用新状态渲染（复制）

1 个答案: