React.js中点击状态旁关闭按钮如何将对应条目状态改为wait？

1. 修正现有JSX语法错误 #

你现有的渲染代码存在三目运算符分支缺失、属性名不规范等问题，修正后如下：

props.products.map((val, i) => (
  val.status === "cancelled" ? 
    (<td><span className="Cancelled">{val.status}</span></td>) :
    (<td className={val.status === "completed" ? "success" : ""}>
      {val.status}
      &nbsp; &nbsp;
      {val.status !== "completed" ? 
        <span onClick={() => this.closeIcon(i)} className="Cancel">
          <i className="fas fa-times-circle"></i>
        </span> 
      : null}
      <br/>
    </td>)           
))

2. 实现关闭图标点击修改状态逻辑 #

React中props是只读属性，无法直接修改，你需要将products数组放在对应组件的state中管理，或者由父组件提供修改products的回调方法传入当前组件使用。

类组件实现（和你当前写法匹配） #

首先在类组件的state中初始化products数据，如果是父组件传入的，需要父组件提供修改方法，这里以组件自身管理state为例：

class YourComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      products: props.products // 初始化时把props传入的products存入state
    }
  }

  // 点击关闭图标触发的方法
  closeIcon = (index) => {
    this.setState(prevState => {
      // 拷贝原数组避免直接修改state
      const updatedProducts = [...prevState.products]
      // 修改对应下标的条目状态
      updatedProducts[index] = {
        ...updatedProducts[index],
        status: "wait"
      }
      return { products: updatedProducts }
    })
  }

  render() {
    // 渲染时使用state中的products，而不是props的
    return this.state.products.map((val, i) => (
      // 放入上面修正后的JSX代码即可
    ))
  }
}

函数组件+Hooks实现（如果是函数组件可参考） #

import { useState } from 'react'

function YourComponent({ products: initProducts }) {
  const [products, setProducts] = useState(initProducts)

  const closeIcon = (index) => {
    setProducts(prev => {
      const updatedProducts = [...prev]
      updatedProducts[index] = {
        ...updatedProducts[index],
        status: "wait"
      }
      return updatedProducts
    })
  }

  return products.map((val, i) => (
    // 放入修正后的JSX代码，注意把this.closeIcon改成closeIcon
  ))
}

注意事项 #

如果products完全由父组件维护，不要在子组件内部存state，直接在父组件实现修改状态的方法，把方法通过props传入子组件调用即可。

内容的提问来源于stack exchange，提问作者Milan Kumar Giri