无法按索引从数组中删除项目

Question

我似乎正确地传递了一切。

• 当我尝试从数组中删除项目时，它会删除除我要删除的项目之外的所有其他项目。也祭坛的项目。例如，如果项目是字符串 ss。
• 如果我从数组中删除最后一个 2 个字符的项目，例如 77。它会将数组中每个 2 个字符长的项目更改为 7。并删除所有其他项目
• 如果我从数组中删除第一项，它会清除整个数组

我需要做什么

从数组中删除与 var itemIndex 匹配的项目

---

母公司

const Pagethree = () => {
const[items,setItem] = useState([]);
return(
        <ul>
            {
            items.map((items, i) =>
                <ListItem index={i} item={items} setItem={setItem}/>)
            }
        </ul>
)

儿童补偿

import React, {useState} from "react";

const ListItem = (props) =>{
const {item, setItem, index} = props;

const removeItem = e =>{
    var array = [...item];
    var indexItem = index;
    if (indexItem !== -1){
        array.splice(indexItem, 1);
        setItem(array);
    }
    console.log(array);
}

return(
    <div>
        <ul>
            {
                <div class="flex">
                    {item}
                    <button onClick={removeItem}>delete</button>
                </div>
            }
        </ul>
    </div>
)
};

export default ListItem;

Answer 1

您的父组件应该管理状态。您应该从父组件向下传递给子组件的是它需要呈现的数据，以及删除按钮的处理程序。

const { useState } = React;

// Passing a value, and index, and the handler
function ListItem({ value, index, updateState }) {
  
  // When `handleDelete` is called, call
  // the `updateState` with the item index
  // as an argument
  function handleDelete() {
    updateState(index);
  }
  
  // The button calls the local function when
  // it is clicked
  return (
    <li>
      {value}
      &nbsp;
      <button onClick={handleDelete}>Delete</button>
    </li>
  );
}

function Example({ data }) {

  const [ items, setItems ] = useState(data);

  // `filter` out the items that don't have
  // the deleted item's index, and update state
  function updateState(index) {
   const updated = items.filter((_, i) => i !== index);
   setItems(updated);
  }

  // `map` over the data making sure
  // that `updateState` is passed down in the props
  return (
    <ul>
      {items.map((el, i) => {
        return (
          <ListItem
            key={i}
            value={el}
            index={i}
            updateState={updateState}
          />
        )
      })}
    </ul>
  );
};

const data = [1, 2, 3, 4 ];

ReactDOM.render(
  <Example data={data} />,
  document.getElementById('react')
);

ul { list-style-type: none;  padding: 0; margin: 0; }
li { margin-bottom: 1em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>