如何一个一个地删除组件？ [复制]

Question

我目前正在使用 React Native 开发应用程序。

此试用版应用有两个按钮（添加和删除）。

当我按下添加按钮时，会出现一个新组件。如果我按下删除按钮，相同的组件就会消失。

---

我的问题是：为什么我不能在这段代码中一个一个地删除组件？

即使我选择了要删除的组件的索引，当我按下 DELETE 按钮时，所有组件都会消失...

我该如何解决这个问题？

---

这是代码（屏幕）：

import React, { useState } from "react";
import { ScrollView } from "react-native";
import Items from "../components/Items";

export default function Screen() {
  const items = {
    lists: [""],
  };

  const [stateItems, setStateItems] = useState(items);

  return (
    <ScrollView>
      <Items stateItems={stateItems} setStateItems={setStateItems} />
    </ScrollView>
  );
}

这里是代码（组件）：

import React from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";

function Item({ index, handleAdd, handleDelete }) {
  return (
    <View style={styles.list}>
      <TouchableOpacity
        onPress={() => {
          handleDelete(index);
        }}
        style={styles.buttonDelate}
      >
        <Text>DELETE</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => {
          handleAdd();
        }}
        style={[styles.buttonDelate, styles.buttonAdd]}
      >
        <Text>ADD</Text>
      </TouchableOpacity>
    </View>
  );
}

export default function Items(props) {
  const stateItems = props.stateItems;
  const setStateItems = props.setStateItems;

  const handleAdd = () => {
    setStateItems({
      ...stateItems,
      lists: [...stateItems.lists, ""],
    });
  };

  const handleDelete = (index) => {
    const ret = stateItems.lists;
    setStateItems({ ...ret, lists: [...ret].splice(index, 1) });
  };

  return (
    <View>
      {stateItems.lists.map((value, i) => (
        <Item
          key={value + i.toString()}
          index={i}
          stateItems={stateItems}
          setStateItems={setStateItems}
          handleAdd={handleAdd}
          handleDelete={handleDelete}
        />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  list: {
    width: "100%",
    backgroundColor: "#ddd",
    margin: 5,
    padding: 10,
  },
  buttonDelate: {
    backgroundColor: "tomato",
    width: 80,
    height: 40,
    borderRadius: 5,
    margin: 3,
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center",
  },
  buttonAdd: {
    backgroundColor: "orange",
  },
});

---

节点：12.18.3

反应原生：4.10.1

世博会：3.22.3

Answer 1

Splice 返回已删除的项目，而不是原始数组。所以当你这样做时：

setStateItems({ ...ret, lists: [...ret].splice(index, 1) });

您将lists 设置为从[...ret] 删除的项目，而不是其余项目。

---

我们可能还想说明为什么您要将列表分散到状态中，并将列表设置为从原始 ret 数组的副本中删除的项目。

const handleDelete = (index) => {
  const ret = stateItems.lists;
  setStateItems({ ...ret, lists: [...ret].splice(index, 1) });
};

第一部分是用列表数组踩踏你的其他状态，我非常怀疑这是你想要的。也许您打算保留其他状态属性？更像是：

const handleDelete = (index) => {
  const { lists: old, ...others } = stateItems;
  const lists = [...old];
  lists.splice(index, 1);
  setStateItems({ ...others, lists });
};