使用 Redux 在 React 中渲染以前的 State

Question

我正在尝试使用 Redux 在 React 中构建一个 10 针计算器，并且我试图将我最近点击的数字显示到表格中：

用纯文本解释有点困难，所以我想我会举一些例子：

这是我最初的 state 始终为 0，每当我单击上面从 1 到 10 的任何数字时，它都会更新： 但我想要的是，每次我点击一个数字时，我点击的数字将呈现在每个 Player 行上，例如像这样（现在下面的这个例子是硬编码的）：

我考虑过使用数组，每次单击一个数字时，该数字都会被推送到数组中，但它不起作用，我尝试调试它，但没有发现它为什么不起作用：

export const AddScore = () => {
  const count = useAppSelector((state) => state.scores.value);
  const dispatch = useAppDispatch();
  const [playerScoreArray, updatePlayerScoreArray] = useState<number[]>([
    1, 5, 10,
  ]);

  const onClick = (i: number) => {
    dispatch(increaseScoreByAmount(i + 1));
    console.log(i + 1);
    updatePlayerScoreArray( i => [...i]);
  };

  return (
    <>
      <div className="py-5">
        {[...Array(10)].map((e: number, i: number) => {
          return (
            <Button onClick={() => onClick(i)} variant="outlined" key={i + 1}>
              {i + 1}
            </Button>
          );
        })}
      </div>
      <Scoreboard playerScore={playerScoreArray} maxScore={count} />
    </>
  );
};

playerScoreArray在另一个组件Scoreboard板上呈现，我试图通过array map 为每个玩家显示它们，但我认为这不起作用。

<tbody className="bg-white divide-y divide-gray-200">
                {/* Info Here */}
                <tr>
                  {playerScore.map((scores) => (
                    <td
                      className="px-6 py-4 whitespace-nowrap"
                      key={Math.random()}
                    >
                      {scores}
                    </td>
                  ))}
                  <td className="px-6 py-4 whitespace-nowrap">{maxScore}</td>
                </tr>
              </tbody>

我尝试使用普通array ，然后使用带有useState的array ，但没有任何效果。

有没有办法用 Redux 做到这一点？

提前感谢您的帮助

Answer 1

我终于找到了一个解决方案，这里是：

  const onClick = (i: number) => {
    dispatch(increaseScoreByAmount(i + 1));
    if (playerScoreArray.length < 10) {
      // This below is the solution
      updatePlayerScoreArray((playerScoreArray) => [
        ...playerScoreArray,
        i + 1,
      ]);
    }

  };

这让我可以从每一次 Redux 点击推送到我的 useState 数组。