如何用Redux Toolkit结合Rating组件创建Action？状态报错求助

1. 修复rank参数传递为null/undefined的问题 #

你的代码里有两个直接导致rank参数异常的问题：

• RankHandler调用时参数缺失：你调用RankHandler(props.id)只传了第一个参数，第二个ranking参数没传，自然会是undefined。
• useState更新的异步特性：setRanking(newValue)是异步操作，立刻console.log(ranking)拿到的是旧值，而且调用RankHandler时应该用刚拿到的newValue，不是当前的ranking状态。

修改后的代码：

const [ranking, setRanking] = useState<number | null>(2);
// 调整参数定义，直接传id和rank更清晰
const RankHandler = (id: number, rank: number | null) => {
  dispatch(
    rankAdd({
      id,
      rank
    })
  );
};

<Rating
  name="simple-controlled"
  value={ranking}
  onClick={(event, newValue) => {
    setRanking(newValue);
    // 直接传递新的评分值和id给RankHandler
    RankHandler(props.id, newValue);
    // 要打印最新值就用newValue，别用ranking
    console.log("rating", newValue);
  }}
/>

2. 解决组件从受控变非受控的错误 #

这个错误一般是因为受控组件的value突然变成了undefined。你可以这么处理：

• 确保Rating的value始终有明确值：避免ranking状态出现undefined，保持它的类型是number | null。
• 处理newValue为null的场景：如果Rating组件取消评分会返回null，要确保setRanking接收的是合法值，别出现undefined。

优化后的代码示例：

<Rating
  name="simple-controlled"
  // 兜底处理，避免value变成undefined
  value={ranking ?? 0}
  onClick={(event, newValue) => {
    // 确保值合法，排除undefined
    const validValue = newValue ?? null;
    setRanking(validValue);
    RankHandler(props.id, validValue);
  }}
/>

另外还要检查你的rankAdd action和reducer，确保它们能正确处理rank为null的情况，避免Redux Store里的数值异常反过来影响组件状态。

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