lit-element 和 redux:更新数组中的对象

Question

我正在尝试更新嵌套在players数组中的对象的roll属性。 我的状态如下所示：

players: [
{
"id": "44ufazeep0o",
"name": "test-player-1",
"roll": 0,
"totalWins": 0
},
{
"id": "eu8hutex7z9",
"name": "test-player-2",
"roll": 0,
"totalWins": 0
}
]

这是我action：

export const addRoll = (roll, id) => {
return {
type: ADD_ROLL,
roll,
id,
}
}

这是我reducer：

case ADD_ROLL:
return state.players.map((player) => {
if (player.id === action.id) {
return {
...player,
roll: action.roll,
}
}
return player;
});
...

我正在这样的组件中观看state.players：

import { connect } from 'pwa-helpers'; // connects a Custom Element base class to the Redux store
...
stateChanged(state) {
this.players = state.players;
}
render() {
return html`${this.players.map((player)=> html`<h1>${player.name}</h1>`)}`
}

现在，每当我调用store.dispatch(addRoll(this.roll, this.id))时，this.players.map()都会在我正在观看state.players的组件中返回undefined。 非常感谢任何关于为什么会发生这种情况的意见！

Answer 1

在调度操作后，您返回了一个数组，而不是一个对象，玩家从状态中键入该数组ADD_ROLL对象。更新它的正确方法是

case ADD_ROLL:
return {
...state,
players: state.players.map((player) => {
if (player.id === action.id) {
return {
...player,
roll: action.roll,
}
}
return player;
});
}
...