从数组(RecoilJS)中删除元素

Question

我有一个表单，其中我放置了一个浮点值(1.1、1.2、1.9等)，我想将其中的一堆存储在一个原子上的数组中：

import { atom } from 'recoil';

export const valueState = atom({
    key: 'values',
    default: []
});

每当我写一个值并且它检查它是一个双值时，这个值就会被添加到valueState中，但是，我想要使它被删除，所以如果我在表单上写的值被删除了，它也会从valueState数组中删除这个值。不过，如果我这样做，程序就会崩溃，我试过使用pop。那我该怎么做呢？

import { valueState as valueStateAtom } from '../../atoms/Atoms';
import { useSetRecoilState } from 'recoil';
const setValue = useSetRecoilState(valueStateAtom);


// The function that handles the onChange event of the form
const setNewValue = (v) => {
   if (v !== '') {
      const valueNumber = parseFloat(v);
      if (!isNaN(valueNumber)) {
         setPageValueChanged(true);
         pageValue = valueNumber;
         // The value gets added to valueState
         setValue((prev) => prev.concat({ valueNumber, cardID }));
      } else {
          setPageValueChanged(false);
      }
   } else {
       setPageValueChanged(false);
       // Delete v from the atom array here
    }
};

Answer 1

pop不适合您，因为它不返回一个新数组(状态不可变)。

我想你可以和filter玩个把戏。例如

setValue((prev) => prev.filter((value, index) => index !== prev.length - 1));

全码

import { valueState as valueStateAtom } from '../../atoms/Atoms';
import { useSetRecoilState } from 'recoil';
const setValue = useSetRecoilState(valueStateAtom);


// The function that handles the onChange event of the form
const setNewValue = (v) => {
   if (v !== '') {
      const valueNumber = parseFloat(v);
      if (!isNaN(valueNumber)) {
         setPageValueChanged(true);
         pageValue = valueNumber;
         // The value gets added to valueState
         setValue((prev) => prev.concat({ valueNumber, cardID }));
      } else {
          setPageValueChanged(false);
      }
   } else {
       setPageValueChanged(false);
       setValue((prev) => prev.filter((value, index) => index !== prev.length - 1));
    }
};

再来一次反馈，你的concat似乎是不正确的。它期望有一个数组param，但是您传递了一个对象。修改可以是

setValue((prev) => prev.concat([{ valueNumber, cardID }]));