React中如何根据id判断数组是否存在对应值并切换显示状态文本

你需要在state中新增字段存储操作状态文本，再在delete方法中通过数组方法判断传入ID是否存在，对应修改状态即可，完整可运行代码如下：

import React, { Component } from 'react';

class Table extends Component {
   constructor(props){
      super(props);
      this.state = {
         numbers:[1, 2, 3, 4, 5],
         // 存储操作状态文本
         operateText: ''
      };
   } 

    delete = (id) => {
      // 判断目标id是否存在于数组
      const idExists = this.state.numbers.includes(id);
      if(idExists) {
        // 存在则显示Deleting，下方的删除逻辑可按需保留或删除
        this.setState({ operateText: 'Deleting' });
        // 模拟异步删除操作，不需要可删除
        setTimeout(() => {
          this.setState(prevState => ({
            numbers: prevState.numbers.filter(num => num !== id),
            operateText: 'Deleted'
          }))
        }, 1000)
      } else {
        // 不存在直接显示Deleted
        this.setState({ operateText: 'Deleted' });
      }
    }

   render() { 
     return (
         <div>
            {/* 渲染状态文本 */}
            <div>{this.state.operateText}</div>
            <button onClick={() =>this.delete(5)}>Click</button>
         </div>
      )
   }
}

export default Table 

核心逻辑说明 #

• 使用Array.includes()方法快速判断数字是否存在于数组中，返回布尔值直接用于判断
• 新增operateText状态专门管理要渲染的提示文本，状态更新后视图会自动重绘
• 如果不需要执行实际的数组元素删除操作，直接删掉setTimeout相关的异步逻辑即可，按判断结果直接设置operateText就能满足需求

内容的提问来源于stack exchange，提问作者Rajendra Bar