如何从 useState 数组中获取对象？

Question

我有一个 table，其中一行有一个复选框，我有一个名为椭圆的对象。

我需要使椭圆对象在单击复选框后立即进入 savedEllipse 数组（使用 useState）。

在我做的测试中，我看到椭圆对象确实进入了数组，但现在我必须在取消选中复选框后将其从数组中取出，我不太明白我是怎么做到的可以使用像我这里的椭圆对象这样的对象类型来做到这一点。

你可以看到我用 setChekcedState 做了同样的事情，它确保复选框的名称进出 checkedState 数组，它工作得很好，但是当我尝试用椭圆来做的时候以同样的方式反对，它没有奏效。

你有什么想法吗？

我发现（在 Whosebug 的此处）有几个问题与此很接近，但其中 none 处理了这个特定问题，所以请不要混淆

代码如下：

export default function App() {

const [checkedState, setChekcedState] = useState([]);

const [savedEllipse, setSavedEllipse] = useState([]);

const ellipse = {
  a: [12, 22],
  b: [22, 55],
  c: [42, 68]
};

const ellipseSet = (e) => {
        const { checked, name } = e.target;
        if (checked) {
            setChekcedState((oldState) => [...oldState, name]);
            setCheckedEllipse((oldState) => [...oldState, ellipse]);
        } else {
            setChekcedState((oldState) => oldState.filter((row) => row !== name));
        }
};

return (

<TableContainer>
      <Table aria-label="simple table">
        <TableBody >
            <TableRow>
              <TableCell padding="checkbox">
                <Checkbox
                  onChange={ellipseSet}
                  checked={checkedState.includes((row.id).toString())}
                  name={1}/>
              </TableCell>
            </TableRow>
          
        </TableBody>
      </Table>
    </TableContainer>
  );  
}

Answer 1

使用这两个函数来检查对象的相等性

 function isEqual(object1, object2) {
      return arrayEquals(object1.a,object2.a) && arrayEquals(object1.b,object2.b) && arrayEquals(object1.c,object2.c);
    }

function arrayEquals(a, b) {
    return Array.isArray(a) &&
        Array.isArray(b) &&
        a.length === b.length &&
        a.every((val, index) => val === b[index]);
}

然后我们可以在椭圆列表中设置状态:)

setCheckedEllipse((oldState) => oldState.filter((row) => !isEqual(row,ellipse));

如何从 useState 数组中获取对象？

How to get an object out of a useState array?

javascript

arrays

reactjs

react-leaflet

react-leaflet-v3