如何解决反应数组映射功能错误？答案

【问题标题】：How can I solve react array map function bug?如何解决反应数组映射功能错误？
【发布时间】：2021-09-24 06:03:24
【问题描述】：

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

代码部分：应用.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} 工作错误。

感谢您的帮助。

【问题讨论】：

标签： javascript reactjs array.prototype.map

【解决方案1】：

不要在地图项中使用索引作为键，使用项 id 代替它。这是问题的原因

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

【讨论】：

【解决方案2】：

您应该在input 中添加checked：

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

【讨论】：

谢谢！我试过defaultChecked。但它没有用。问题解决了！