Javascript 更新存储时，我的组件不会重新渲染

我在谷歌上搜索过，但没有任何帮助。 我知道在redux中返回相同的对象时，react组件不会重新渲染。不管我是不是在改变商店，我使用的是“react redux”中的连接，其他组件都可以正常工作

谢谢：D

//I'm updating a attribute value from this object: 
{name: 'some name', score: 0,}

//to 
{name: 'some name', score: 1,}

//just change the score 

//Component: 
class ListTeam extends Component {
  render() {
    return (
      <ListContainer onNewTeam={this.props.onNewTeam}>
        {this.props.listTeam.map((item) =>
          <Item
            name={item.name}
            score={item.score}
            key={item.toString()}
          />
        )}
      </ListContainer>
    )
  }
}

const mapToProps = (store, props) => {
  return {
    listTeam: store.listTeam
  }
}

export default connect(mapToProps)(ListTeam)

---

您错过的是，在

react redux

提供的

connect

中，它只对当前状态和以前的状态进行浅层比较。由于您仅将

currentPlayer

和

listTeam

从存储区传递到组件，并且在操作

ADD_POINT

之后，对象

listTeam

将保留其所有键不变，

connect

逻辑确定不应进行更新。这是一个与您的实现无关的问题线程

一个简单的解决方案是每次更新时都在存储中克隆

listTeam

，以便将其识别为新对象：

   case 'ADD_POINT':{
    let newstate = Object.assign({},state); //new state from current state
    let current = newstate.currentPlayer   //get current player 
    let listTeam = newstate.listTeam;  //getListTeam
    listTeam[current].score++; //+1 to score 

    return { 
        ...state,
        listTeam: JSON.parse(JSON.stringify(listTeam)
    }
}

上述解决方案的简单代码沙盒：

您还可以按照Redux的建议来研究如何处理不可变状态

---

另一个解决方案是自定义

连接

函数，强制它识别

列表中的更改

：。但是我认为你不需要走那么远。

你在做

connect（）（ListTeam）

？是的，在其他组件中也可以，但分数永远不会在UI中更新

   case 'ADD_POINT':{
    let newstate = Object.assign({},state); //new state from current state
    let current = newstate.currentPlayer   //get current player 
    let listTeam = newstate.listTeam;  //getListTeam
    listTeam[current].score++; //+1 to score 

    return { 
        ...state,
        listTeam: JSON.parse(JSON.stringify(listTeam)
    }
}