我该如何解决反应数组映射功能错误？

Question

我正在尝试制作一个带有 React 的待办事项应用程序。它具有基本功能：项目添加、项目删除和完成任务。在我的代码中，功能可以正常工作，但是当我单击完成按钮并同时删除该项目时，它会出现问题。项目删除但已完成复选框添加下一个项目。

Image Here

代码部分： App.js

import './App.css';
import Header from './components/Header'; 
import List from './components/List';
import React, { useState, useEffect } from 'react';

function App() {

  const [elements, setElements] = useState([]);

  useEffect(() => {
    console.log(elements);
  }, [elements]);

  const setElement = (element) => {
    setElements([...elements, element]);
  }

  const completeElement = (index) => {
    let array = [...elements];
    array[index].isCompleted = !array[index].isCompleted;
    setElements(array);
 }

  const deleteElement = (index) => {
    let array = [...elements];
    array.splice(index, 1);
    setElements(array);
  }

  return (
    <div className="todoapp">
      <Header save={setElement} />
      <List elements={elements} complete={completeElement} remove={deleteElement} />
    </div>
  );
}

export default App;

List.js:

{elements.map((item, index) => {
    const status = item.isCompleted ? "completed" : "";
    return(
        <li className={status}  key={index}>
            <div className="view">
                 <input className="toggle" type="checkbox" onClick={() => {complete(index)}} />
                 <label>{item.text}</label>
                 <button className="destroy" onClick={() => {remove(index)}}></button>
              </div>
          </li> 
      );
 })}

在 List.js，className={status} 正在运行的越野车。

感谢您的帮助。

Answer 1

不要在地图项中使用索引作为键，而应使用项 ID。这是问题的原因

您可以在这里阅读为什么我们需要 Reac 列表中的键 https://adhithiravi.medium.com/why-do-i-need-keys-in-react-lists-dbb522188bbb

Answer 2

您应该在 input 中添加 checked:

<input ... checked={item.isCompleted} />

我该如何解决反应数组映射功能错误？

How can I solve react array map function bug?

javascript

reactjs

array.prototype.map