绘制地图的工作并不顺利

Question

我有以下代码：

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); 
const [bets, setBets] = useState({ red: [{name: 'test' , amount: '400$'}],   green: [],black: []});
const handleRoll = () => {
setBets(true);
}
const countdownDone = () => {
setRoll(false);
setCount(true);
};
const rollDone = () => {
setRoll(true);
setCount(false);
};
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={handleRoll}/>
</div>
);
};
export default Roulette;

然后我想在BetTable 中绘制地图

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 = ({name, amount}) => {
const [roll, setRoll] = useState(true);
const [count, setCount] = useState(10); 
// const [bets, setBets] = useState({ red: [{name: 'test' , amount: '400$'}],   green: [],black: []});
// state={
//   red: [{name: 'test' , amount: '400$'}],
//   green: [],
//   black: []
// }
const getBets = () => {

var red = [{name: 'test' , amount: '400$'}],
var green = [],
var black = []
}
return getBets();
]
// const handleRoll = () => {
//   setBets(true);
// }
function countdownDone() {
setRoll(false);
setCount(true);
}
const rollDone = () => {
setRoll(true);
setCount(false);
};
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}/>
</div>
);
};
export default Roulette;

我试图实现您所看到的，但通过在控制台上检查我的错误，映射没有正确完成，我只是有一块空白。也许我在考虑从const改为class，并使用道具。但我确信这不是的唯一途径

p.S我也忘了添加BetClass。

import styles from "./Bets.module.css"; // import styles from "./Bets.module.css";
const Bets = () => {
return(
// <table>
//   <tbody>
//     <tr>
<div className={styles.table}>
<div className={styles.tablerow}>
<BetTable color='RED' bets={Bets.red}/>
<BetTable color='GREEN' bets={Bets.green}/>
<BetTable color='BLACK' bets={Bets.black}/>
</div>
</div>

);
};
export default Bets;

Answer 1

您的代码仍然没有意义。。。例如，你有这个getBets():

const getBets = () => {    
var red = [{name: 'test' , amount: '400$'}],
var green = [],
var black = []
}
// These two lines look like an error
return getBets();
]

这里的return与任何东西都不匹配，还有一个额外的括号与任何地方都不匹配。

如果你回到你已经注释掉的代码：

const [bets, setBets] = useState({ 
red: [{name: 'test' , amount: '400$'}],
green: [],
black: []
});

并将bets传递给Bets组件：

<Bets bets={bets}/>

然后，您所要做的就是修复Bets组件，将bets作为属性：

const Bets = ({ bets }) => {
return(
<div className={styles.table}>
<div className={styles.tablerow}>
<BetTable color='RED' bets={bets.red}/>
<BetTable color='GREEN' bets={bets.green}/>
<BetTable color='BLACK' bets={bets.black}/>
</div>
</div>
);
};

不确定这是否是你想要的；同样，如果代码/问题不更清楚，就很难提供帮助。