Javascript 在ReactJS中单击删除元素？

我有一个行组件，我正在导入到我的App.js组件中，显然我没有删除，但是delete函数似乎没有删除正确的行。即使我删除了第二个，它也会先删除最后一个。所以基本上如果我在第二行单击delete，它应该删除第二行，而不是第三行，以此类推

我的App.js或我的根组件如下所示：-

import React, {Component} from 'react';
import './App.css';
import Row from './Row.js'

class App extends Component {
   state = {
      rows: [
       {value: 'row1', options:[1,2,3,4,5] },
       {value: 'row2', options:[1,2,3,4,5] },
       {value: 'row3', options:[ 1,2,3,4,5 ]}
     ]
  }

  updateValue = (e, idx) => {
  const rows = [...this.state.rows];
  rows[idx].value = e.target.value;
 this.setState({
  rows,
 });
}

addRow = () => {
const rows = [...this.state.rows, {value:'', options: [1,2,3,4,5}];
 this.setState({
    rows,
   });
 }

 deleteRow = (idx) => {
 const copy = [...this.state.rows]
 copy.splice(idx,1)
 this.setState ({
 rows:copy
  })
}

render() {
   return (
      <div>
    {
  this.state.rows.map ( (row,idx) => {
    return (
      <Row 
      key = {idx} 
      value = { row.value } 
      onChange = { (e) => this.updateValue(e,idx) } 
      delete = { this.deleteRow.bind(this,idx) } />
       )
    })
   }
 <button onClick = {this.addRow}> Add </button>
 </div>
     )
   }
} 

 export default App;

我的行组件如下所示：-

const Row = ( props) => {
let options = props.options.map(opt => <option key={opt}>{opt}</option>);

return (
   <div>
    <input value= { props.value } onChange={ props.onChange }></input>
    <select>
        {options}
    </select>
    <button onClick = { props.delete} > Delete </button>  
   </div>
  )
}

export default Row

我昨天问了一个类似的问题，但当时没有意识到这些项目没有从正确的位置删除？

试试这个

deleteRow = (item) => {
 let filtered = this.state.rows.filter(row=>row.value!==item.value);
 this.setState ({
 rows: filtered
  })
}

将行传递给delete函数

    <Row 
      key = {idx} 
      value = { row.value } 
      onChange = { (e) => this.updateValue(e,idx) } 
      delete = {()=>this.deleteRow(row) } />
       )

---

你不认为你错过了这个，也就是这个道具吗？你的例子对我来说似乎很有效。我注释掉了行组件中的选项呈现，但这与删除行是不同的问题。这对我也适用。修复了几个语法错误并正确运行。@SomethingWhather现在通过更改两个提到的代码进行检查如果多行共享相同的值，这将删除额外的值rows@khuynh那你有什么建议？因为我的代码似乎没有达到预期的效果：|这是一种糟糕的做法。新国家不应该像旧国家那样。然后您应该使用函数设置状态我同意这比拼接状态更好，因为行有一个唯一的id来正确过滤。但是，我认为将prevProps参数与setState一起使用会更好一些。这保证了国家将是最新的。

 let filtered = this.state.rows.filter(row=>row.id!==item.id);