React native：从数组中删除一个项目

Question

我正在尝试从数组中删除一个项目。

假设我有一个包含 5 个项目的数组：[0,1,2,3,4] 如果我删除第 5 项 [4]，它可以正常工作。但是如果我删除项目 [1]，对象 [2,3,4] 也会被删除。那我做错了什么？

这个函数增加了一个新的可拖动项

  const addshootOutside = index => {
    setShootOutside([
      ...shootOutside,
      <Outside key={index} pageX={positionX} pageY={positionY}/>,
    ]);
  };

这个函数删除一个可拖动的项目

  const deleteHandler = index => {
    const arr = shootOutside.filter((el, i) => index !== i)
    setShootOutside(arr);
  };

这里我称之为“deleteHandler”

  const twoOptionAlertHandler = () => {
    //function to make two option alert
    Alert.alert(
      //title
      'Ta bort',
      //body
      'Är du säker på att du vill ta bort skott?',
      [
        { text: 'OK', onPress: (index) => deleteHandler(index) },
        {
          text: 'Avbryt',
          onPress: () => console.log('No Pressed'),
          style: 'cancel',
        },
      ],
      { cancelable: false }
      //clicking out side of alert will not cancel
    );
  };

这是我的可拖动项目。

  console.log(shootOutside);
  const Outside = () => {
    return (
      <Draggable
        x={200}
        y={200}
        onShortPressRelease={twoOptionAlertHandler}
        renderSize={20}
        renderColor="red"
        renderText="x"
        isCircle
        onDragRelease={e => {
          setPositionY(e.nativeEvent.pageY);
          setPositionX(e.nativeEvent.pageX);
        }}
      />
    );
  };

Answer 1

@Alexander 你需要调用deleteHandler 并使用索引作为参数。

从Alert.alert 中的Alert.alert 的onPress 方法deleteHandler 在没有索引的情况下被调用。因此删除数组中的所有内容

我确信您的应用程序将索引作为参数传递应该可以正常工作 例如Alert.alert 在twoOptionsHandlerAlert。试试这个：

const twoOptionAlertHandler = () => {
//function to make two option alert
Alert.alert(
  //title
  'Ta bort',
  //body
  'Är du säker på att du vill ta bort skott?',
  [
    { text: 'OK', onPress: () => deleteHandler(indexToDeleteHere) },
    {
      text: 'Avbryt',
      onPress: () => console.log('No Pressed'),
      style: 'cancel',
    },
  ],
  { cancelable: false }
  //clicking out side of alert will not cancel
);

};

其中indexToDeleteHere 是要删除的项目数组中的索引