reactjs - 数组中的正确项目并不总是被删除。反应上下文

Question

我在我的上下文中有一个删除函数，我将 id 传递给它，因此我可以从数组中删除组件，但它并不总是能正常工作。例如，如果我在板上添加 3 个注释组件，它将始终删除板上的最后一项。如果我在 2 个笔记之间添加一个待办事项列表，它们会正确删除。有 2 个控制台日志，删除的一个显示正确的已删除项目，组件显示剩下的 2 个。同样，如果有 3 个笔记，它每次都会删除最后一个项目，但如果我做一个笔记，一个做，然后再一个笔记，则删除板上正确的项目。

import React, { createContext, useReducer, useState } from "react";
import ComponentReducer from "./ComponentReducer";

const NewComponentState: NewComponentsState = {
  components: [],
  addComponent: () => {},
  deleteComponent: () => {},
};

export const NewComponentContext =
  React.createContext<NewComponentsState>(NewComponentState);

export const NewComponentProvider: React.FC = ({ children }) => {
  const [components, setComponents] = useState(NewComponentState.components);

    const deleteComponent = (id: any) => {
      
      for (let i = 0; i < components.length; i++) {

           if(components[i].id === id) {
             let deleted = components.splice(i, 1)
             console.log(deleted)
             setComponents([...components])
             console.log(components)
           } 
      }
    }
   const addComponent = (newComponent: any) => {
     setComponents([...components, newComponent])
   }
  return (
    <NewComponentContext.Provider
      value={{ components, deleteComponent, addComponent }}
    >
      {children}
    </NewComponentContext.Provider>
  );
};

板组件

import React, { useContext } from "react";
import { NewComponentContext } from "../Context/NewComponentContext";
import NewComponentMenu from "./NewComponents/NewComponentMenu";
import Note from "./NewComponents/Note/Note";
import Photo from "./NewComponents/Photo/Photo";
import TodoList from "./NewComponents/Todo/TodoList";

const newComponents: any = {
  1: TodoList,
  2: Photo,
  3: Note
}
const Board = () => {
    const { components } = useContext(NewComponentContext);

    const componentList  = components.map((component, i) => {
      const id: number = component.componentType
      const NewComponent = newComponents[id]
      
      for (const property in newComponents) {
          const value = parseInt(property)
          if (value == id) {
            return (
              <div key={i}>
                <NewComponent id={component.id}/>
              </div>
            )
          }
      }
    });
  
    return (
      <div className="flex space-x-10 mt-8">
        <NewComponentMenu />
        <div className="grid grid-cols-6 gap-8">{componentList}</div>
      </div>
    );
  };
  
  export default Board;

标签： reactjs