在输入字段中输入数字后，检查该数字是否存在于 React Hooks 的列表中

Question

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

points per player in a basketball match

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

在输入字段中输入一个数字
检查该号码是否已经存在
如果是：将 1、2、3 添加到 totPoints，具体取决于单击哪个按钮
如果否：添加数字和 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 是一个数字。您可以使用 + operator 将其转换为数字以正确比较它们：

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

在输入字段中输入数字后，检查该数字是否存在于 React Hooks 的列表中

After entering a number in input field, check if that number exist on a list in react hooks

arrays

object

reactjs

react-hooks

use-state