arrays - 在输入字段中输入数字后，检查该数字是否存在于反应钩子的列表中

Question

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

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

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

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

2a) 2b ) 如果否：添加数字和 totPoints = 1，或 totPoints = 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')无论我在输入字段中输入什么数字

标签： arraysreactjsobjectreact-hooksuse-state

Answer 1

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

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