从数组中删除一个元素 (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 对你不起作用，因为它没有 return 新数组（状态不变性）

我想你可以用 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貌似不对。它期望有一个数组参数，但你传递了一个对象。修改可以是

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

从数组中删除一个元素 (RecoilJS)

Delete an element from an array (RecoilJS)

javascript

reactjs

recoiljs