React待办列表如何对比输入与state数组避免重复任务录入

实现思路很简单，在原有的空值校验逻辑后新增一层重复校验，匹配输入内容是否已经存在于tasks数组中即可。

修改后的handleClick代码 #

handleClick() {
  // 先去除输入内容首尾空格，避免空格导致的误判，不需要可以删掉trim()
  const inputTask = this.state.inputValue.trim();

  // 原有空值校验
  if (inputTask === "") {
    alert("Cannot accept Blank Entry");
    return;
  }

  // 新增重复校验逻辑
  const isDuplicate = this.state.tasks.some(task => {
    // 如果不需要忽略任务本身的首尾空格，这里也可以删掉trim()
    return task.trim() === inputTask;
  });
  if (isDuplicate) {
    alert("该任务已存在，请勿重复添加");
    return;
  }

  // 所有校验通过后再执行添加逻辑
  this.props.onAdd(inputTask);
  this.setState({ inputValue: "" });
}

补充注意点 #

• 如果tasks数组是存放在父组件、通过props传递到当前组件的，把校验逻辑里的this.state.tasks替换为this.props.tasks即可
• 如果需要实现大小写不敏感的校验（比如"Buy milk"和"buy milk"判定为重复），可以把对比的两个值都转为小写：task.trim().toLowerCase() === inputTask.toLowerCase()
• 你也可以把重复校验逻辑放到父组件的onAdd方法中，两种实现方式都可以，在用户点击提交时先校验可以更早给出反馈。

内容的提问来源于stack exchange，提问作者zaber raiyan