在反应中拼接一个数组不断删除第一个元素[关闭]答案

【问题标题】：Splice an array in react keeps removing the first element [closed]在反应中拼接一个数组不断删除第一个元素[关闭]
【发布时间】：2021-06-02 21:15:58
【问题描述】：

在我的待办事项应用程序上工作时，当我想从数组中删除一个元素时，它一直在删除第一个元素... 我找不到原因。

有什么想法吗？我复制了链接到我的删除功能的代码！

谢谢！

function App () {

  const [activities, setActivities] = useState([]);
  const [color, setColor] = useState ('Black');
  const [complete, setComplete] = useState([]);
 

  //ADD NEW ACTIVITY

  /* activities*/

  function addActivity (data) {
    let newActivity = { data, done:false, isMotivating: false, id: sum , color: 'Black' }
    sum++;
    setActivities((activities) => [ ...activities, newActivity])
    //console.log(`App: ${JSON.stringify(data)}`)
      };
    


  function toggleColor (a)  {
    setColor ('')
    activities[a.id].isMotivating =  activities[a.id].isMotivating ? false : true

        if (activities[a.id].isMotivating === false) {
        setColor ('green')
        activities[a.id].color = color
    } else {
        setColor ('red')
        activities[a.id].color = color
    }
        console.log(activities[a.id])
        return activities;
    } 

    function removeTodo (id ) {
      const newTodos = [...activities];
      newTodos.splice(id, 1);
      setActivities(newTodos);
    };
}

【问题讨论】：

你在哪里打电话给removeTodo？
除非您显示返回的 jsx，否则我们无能为力。您可能没有将正确的id 传递给removeTodo

标签： javascript arrays reactjs splice

【解决方案1】：

您的 sum 似乎是通过 let/var 声明的，在每次重新渲染时将初始化为 0，因此您的每个 id 可能都设置为 0。

您可以像这样使用useRef：-

const uuid = useRef(0);

内部addActivity


function addActivity (data) {
    let newActivity = { data, done:false, isMotivating: false, id:uuid.current , color: 'Black' }
    uuid.current++;
    setActivities((activities) => [ ...activities, newActivity])
    //console.log(`App: ${JSON.stringify(data)}`)
      };

但不确定使用id 作为index 拼接是否是最好的方法，因为你总是删除东西，你的数组长度会改变。

【讨论】：

您好 :) 感谢您的帮助，这里是 JSX (...)