使用 Zustand 和 Immer 考虑数据结构中的嵌套状态

问：

我的应用程序中出现问题处理状态

流

螺旋钻穿 3 个组件。

-- StartRound.jsx

if (roundStarted && selectedRoundId) {
    return (
      <Scorecard
        onGoBack={resetRound}
        courseId={selectedCourse._id}
        selectedTees={selectedTees}
        newRoundId={selectedRoundId}
      />
    );
  }

--Scorecard.jsx 获取道具并创建记分卡

export default function Scorecard({
  onGoBack,
  courseId,
  selectedTees,
  newRoundId,
})

--SingleHoleEdit.jsx

export default function SingleHoleEdit({ holeScore, roundId, onUpdate })

我想发生什么

1. 玩家选择圆形和T恤颜色
2. StartRound.jsx 中的状态

  const [courses, setCourses] = useState([]); //
  const [selectedCourse, setSelectedCourse] = useState(null);
  const [selectedTees, setSelectedTees] = useState(null);
  const [roundStarted, setRoundStarted] = useState(false);
  const [selectedRoundId, setSelectedRoundId] = useState(null);

  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

3. 记分卡.jsx

const [selectedCourse, setSelectedCourse] = useState(null);
  const [selectedTeeColor, setSelectedTeeColor] = useState(null);
  const [courseData, setCourseData] = useState(null);
  const [roundId, setRoundId] = useState(null);
  const [scores, setScores] = useState({}); // This will store hole scores.

  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

4. 当玩家在单洞上单击当前球场和当前回合的记分卡中的编辑分数按钮时，将呈现单洞卡

问题

• 我无法弄清楚如何处理最后一个组件的状态。

export default function SingleHoleEdit({ holeScore, roundId, onUpdate }) {
  const handleUpdate = (score) => {
    const parsedScore = parseInt(score, 10);
    if (!isNaN(parsedScore)) {
      onUpdate(holeScore.score, parsedScore, roundId);
    } else {
      alert("Please enter a valid score");
    }
  };

  return (
    <div className="hole-edit">
      <h3>Edit Hole {holeScore.hole}</h3>
      <p>Yardage: {tees?.length || "-"}</p>
      <p>Par: {tees?.par || "-"}</p>
      <p>Handicap: {tees?.handicap || "-"}</p>
      <div className="score-input">
        <label>
          Score:
          <input type="number" min="1" step="1" />
        </label>
      </div>
      <button onClick={handleUpdate}>Update Score</button>
    </div>
  );
}

• 它作为一个组件未完成，无法按预期工作。

问题

• 利用 Zustand、Redux、Context 等 react 使用状态管理是处理这种流状态的正确方法吗？我将如何为上述内容创建状态切片并达到预期的效果？

• 我是国家管理理念和实施的品牌菜鸟，所以请放轻松。如果你不能对我轻松，那就强硬而复杂。

先谢谢你！！

上面描述了这些意图。