在输入字段中输入数字后，检查react钩子中的列表中是否存在该数字

Question

我正在通过我的项目学习reactjs和react hook

篮球比赛中每位球员的得分

我希望应用程序执行以下操作：

1. 在输入字段中输入一个数字
2. 检查该号码是否已存在
3. 如果是：根据单击的按钮，将1、2、3添加到totPoints
4. 如果否：加上数字和totPoints=1、torPoints=2或totPoints=3。取决于单击的按钮

2a(2b(如果否：添加数字和其中之一，totPoints=1，或torPoints=2，或totPoints=3。取决于点击哪个按钮

从youtube 得到想法后，我正在重写我的代码

const [number, setNumber] = useState('');
const [totPoints, setTotPoints] = useState(0);
const [scorers, setScorers] = useState([
{id: nanoid(4), number: 9, totPoints: 99},
{id: nanoid(4), number: 1, totPoints: 11},
{id: nanoid(4), number: 15, totPoints: 9},
]);
const onePointScoredHandler = () => {
const players = [...scorers];
const existingScorer = players.find((player) => player.number === number);
if (existingScorer) {
console.log('exist');
} else {
console.log('new');
}

不幸的是，无论我在输入字段中输入什么数字，if(existingScorer)都无法识别列表中已经存在的数字，而是console.log ('new')

Answer 1

这是因为number状态是字符串，而player.number是数字。您可以使用+运算符将其转换为数字以正确比较它们：

const existingScorer = players.find((player) => player.number === +number);