1

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

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

在我所做的测试中，我看到椭圆对象确实进入了数组，但是现在我必须在取消选中复选框后将其从数组中取出，而且我无法弄清楚如何使用对象类型，例如我在这里的椭圆对象。

你可以看到我对 setChekcedState 做了同样的事情，它确保复选框的名称进出 checkState 数组，而且效果很好，但是当我尝试用同样的方式对椭圆对象执行此操作时，那没起效。

你有想法吗？

我（在 StackOverflow 中）发现了一些与此接近的问题，但没有一个问题涉及这个特定问题，所以不要混淆

这是代码：

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>
  );  
}
4

1 回答 1

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));
于 2022-02-23T19:08:36.687 回答