React轮盘赌应用数据映射异常问题求助

核心问题梳理 #

你的代码里有几个关键错误导致BetTable无法正常映射数据：

• props传递错误：初始代码里给Bets组件传的是handleRoll函数而不是bets状态；修改后的代码里bets变量根本没定义，直接传会报错。
• Bets组件未接收props：直接用Bets.red访问组件自身属性，完全搞错了props的用法，应该从组件的props参数里获取传入的投注数据。
• 语法错误：修改后的Roulette里getBets函数语法混乱，根本无法生成有效数据。
• 状态篡改：初始代码里handleRoll把bets设为true，直接破坏了原本的对象结构。
• 组件未导入：Bets里用了BetTable但没导入，会直接导致渲染失败。

修复后的完整代码 #

1. 修复Roulette组件

保留正确的状态管理，正确传递bets给Bets组件：

import { useState } from "react";
import Wheel from "../components/wheel/Wheel";
import Countdown from "../components/countdown/Countdown";
import Bets from "../components/bets/Bets";
import Input from "../components/input/Input";
import styles from "./Roulette.module.css";

const Roulette = () => {
  const [roll, setRoll] = useState(true);
  const [count, setCount] = useState(10); 
  // 保留正确的bets初始状态
  const [bets, setBets] = useState({ 
    red: [{name: 'test' , amount: '400$'}],   
    green: [],
    black: []
  });

  // 修正handleRoll，不要破坏bets结构，示例用重置投注数据逻辑
  const handleRoll = () => {
    setBets({ 
      red: [{name: 'test' , amount: '400$'}],   
      green: [],
      black: []
    });
  };

  const countdownDone = () => {
    setRoll(false);
    setCount(10); // 之前设为true错误，重置倒计时数值
  };

  const rollDone = () => {
    setRoll(true);
    setCount(10);
  };

  const updateRoll = () => {
    setRoll(!roll);
  };

  return (
    <div className={styles.container}>
      <div className={styles.title}>ROULETTE</div>
      <Countdown count={count} done={countdownDone} />
      <Wheel roll={updateRoll} done={rollDone} />
      <Input/>
      {/* 正确传递bets状态给Bets组件 */}
      <Bets bets={bets}/>
    </div>
  );
};

export default Roulette;

2. 修复Bets组件

正确接收props，导入BetTable并传递对应颜色的投注数据：

import styles from "./Bets.module.css";
// 必须导入BetTable组件，根据实际路径调整
import BetTable from "./BetTable";

// 接收props参数
const Bets = ({ bets }) => {
  return(
    <div className={styles.table}>
      <div className={styles.tablerow}>
        {/* 从props的bets对象里取对应颜色的数据 */}
        <BetTable color='RED' bets={bets.red}/>
        <BetTable color='GREEN' bets={bets.green}/>
        <BetTable color='BLACK' bets={bets.black}/>
      </div>
    </div>
  );
};

export default Bets;

3. 示例BetTable组件（补充实现）

实现映射投注数据的逻辑，确保能渲染列表：

import styles from "./BetTable.module.css";

const BetTable = ({ color, bets }) => {
  return (
    <div className={styles.tableColumn}>
      <h3>{color}</h3>
      <div className={styles.betList}>
        {/* 映射bets数组，给每个item加唯一key */}
        {bets.map((bet, index) => (
          <div key={index} className={styles.betItem}>
            <span>{bet.name}</span>
            <span>{bet.amount}</span>
          </div>
        ))}
        {/* 空状态提示 */}
        {bets.length === 0 && <p>No bets yet</p>}
      </div>
    </div>
  );
};

export default BetTable;

额外注意点 #

• 状态更新时不要破坏原有数据结构，比如setBets(true)这种操作会把对象变成布尔值，完全无法使用。
• 列表渲染时必须给每个元素加唯一key，避免React警告和渲染异常。
• 确保所有用到的组件都正确导入，路径不要写错。

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