如何在子组件ToggleButton的onClick触发时重新渲染React父组件RiskMatrix

问题根源 #

你代码的核心问题是把useSelector的返回值存到了本地useState中：useState的初始值仅会在组件首次挂载时赋值一次，后续Redux中risk_matrix状态更新时，本地state不会自动同步，因此父组件始终读取的是缓存的旧值，自然不会触发重渲染。

解决方案 #

直接移除父组件中多余的本地state，直接使用useSelector返回的响应式状态即可：useSelector本身会监听Redux对应状态的变化，只要状态发生变更就会自动触发所在组件的重渲染。

修改后的父组件核心代码如下：

export default function RiskMatrix({disable}) {
    // 移除多余的useState，直接用useSelector获取响应式状态
    const risk_matrix = useSelector((state) => state.riskMatrix.risk_matrix);
    const dispatch = useDispatch();

    // 建议用===代替==避免隐式类型转换问题
    if (disable === true) {
        return (
            <TableContainer component={Paper} style={{height: "40vh", width: "90vh"}}>
                {console.log(risk_matrix)}
                <Table size="small" sx={{ minWidth: 200 }}>
                    <TableHead>
                        <TableRow>
                            <TableCell align="center" width="90"></TableCell>
                            {consequences_description.map((description) => (
                                <TableCell align="center" width="90">{description}</TableCell>
                                )
                            )}
                        </TableRow>
                    </TableHead>
                    <TableBody>    

                        {risk_matrix.map((row, row_index) => (
                        <TableRow
                            key={row_index}
                            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                        >
                            <TableCell component="th" scope="row">
                                {likelyhood_description[row_index]}
                            </TableCell>
                            {row.map( (column, column_index) => (
                                <TableCell align="center">
                                    <ToggleButton 
                                        risk={column}
                                        row_index={row_index}
                                        column_index={column_index}
                                        />
                                </TableCell>
                            ))}
                        </TableRow>
                        ))}

                    </TableBody>
                </Table>
            </TableContainer>
        );
    } else {
        return null
    }
}

额外注意事项 #

如果修改后仍无法触发重渲染，请检查你的Redux reducer写法是否符合不可变更新原则：不能直接修改原state，必须返回全新的数组对象，否则Redux无法检测到状态变更。正确的更新写法参考：

// reducer中更新矩阵的示例代码
case 'UPDATE_MATRIX':
  const { row_index, column_index, value } = action.payload;
  // 逐层拷贝数组，避免修改原state
  const newMatrix = state.risk_matrix.map((row, rIdx) => 
    rIdx === row_index 
      ? row.map((col, cIdx) => cIdx === column_index ? value : col)
      : row
  );
  return {
    ...state,
    risk_matrix: newMatrix
  };

内容的提问来源于stack exchange，提问作者Ruben Adriaanse