react redux:在嵌套状态下更新特定位置

Question

因此，对于TictacToe游戏，我会在状态中有一个嵌套数组，如下所示：

field: [
[-1, -1, -1],
[-1, -1, -1],
[-1, -1, -1],
],

现在我想将一个特定的单元格设置为X或O，但我无法完全重新绘制。我有两个功能组件，无论我尝试了什么，我都无法更新单元格。减速器正确地更新了我的状态。那么，我应该写减缩器还是更改任何内容，以便在更改后重新绘制每个单元格？

代码示例。显然还有更多，但我相信这应该足够了。

function Ttt_game(props){
return (
<div>
<table>
<tbody>
{
props.field.map((row, i) => (<Ttt_row row={row} key={i} row_index={i} />))
}
</tbody>
</table>
</div>
)
}

和

function Ttt_row(props){
return (
<tr>
{
row.map((cell, i) => (
<td key={i}>
<div onClick={() => insertIntoField({ x: row_index, y: i, symbol })}>
{cell}
</div>
</td>
))
}
</tr>
)
}

减速器：

case "ttt_insert":
let newField = state.field;
newField[action.payload.x][action.payload.y] = action.payload.symbol;
return {
...state,
field: newField
};

Answer 1

您正在更改字段对象，因此它不会更新。对象和数组是可变的，所以必须创建新的数组；更新的那个。

下面是使用CCD_ 1函数的示例。

你的减速器是这样的：

const { field } = state;
const newField = field.map((row, rIndex) => {
if (rIndex !== action.payload.x) {
return row;
}
return row.map((col, cIndex) => {
if (cIndex !== action.payload.y) {
return col;
}
return action.payload.symbol;
})
})
return {
...state,
field: newField,
}

Answer 2

您看起来正在更改field状态对象。如果你没有使用redux工具包或Immer，那么这是一个禁忌。

case "ttt_insert":
let newField = state.field; // <-- newField is reference to state object
newField[action.payload.x][action.payload.y] = action.payload.symbol;
return {
...state,
field: newField
};

您应该浅层复制field状态对象，然后更新它。您需要浅层复制正在更新的任何嵌套对象/数组

case "ttt_insert":
const { payload } = action;

return {
...state,
field: state.field.map((row, x) =>
x === payload.x
? row.map((col, y) => (y === payload.y ? payload.symbol : col))
: row
)
};