javascript - 如何使用索引来识别被点击的 Todo？

Question

基本上我需要删除一个被点击的 ToDo，但是因为 ToDo 没有唯一的 id..它删除了所有这些..我尝试了 UUIDV4 但我没有成功将它添加到每个 ToDo

App.js

class App extends Component {
  state = {
    input: "",
    todo: [],
    completed: false
  };

  handleRemove = (id) => {
    const remove = this.state.todo.filter((todo) => 
    todo.key !== id.key);
    this.setState({todo: remove});
  }

...
 <TodoList 
          todo={this.state.todo}
          rmv={this.handleRemove}
        />

待办事项列表

const TodoList = ({todo, rmv}) => {
    const todoBuild = todo.map((todo, index) => (
      <Todo 
        todo={todo} 
        key={index} 
        rmv={rmv}/>
    ))
    return <div> {todoBuild} </div>
};

待办事项

const Todo = ({todo, rmv}) => {
    return (
        <div className='todo'>
            <p>{todo}</p>
            <button className='btn-rmv' onClick={() => rmv (todo)}>x</button>
        </div>
    )
}

Answer 1

数组是有序结构，所以你可以依赖项目索引，即使在序列化/反序列化之后，它也会保持不变。

注意(感谢@devserkan):此示例中使用的扩展运算符(...) 创建数组的浅拷贝，如果您使用嵌套数组 - 请 splice 可以修改原始数组(这是您永远不想做的)。请使用方法创建数组的深拷贝(JSON.parse(JSON.stringify(...))、lodash 库方法等)或替换拼接 使用 Array.filter 函数。

删除函数

handleRemove = (id) => {
    let todo = [...this.state.todo]
    todo.splice(id, 1);
    this.setState({todo});
  }

待办事项

const TodoList = ({todo, rmv}) => {
    const todoBuild = todo.map((todo, index) => (
      <Todo 
        itemIndex={index}
        todo={todo} 
        key={index} 
        rmv={rmv}/>
    ))
    return <div> {todoBuild} </div>
};

待办事项

const Todo = ({todo, rmv, itemIndex}) => {
    return (
        <div className='todo'>
            <p>{todo}</p>
            <button className='btn-rmv' onClick={() => rmv(itemIndex)}>x</button>
        </div>
    )
}