使状态相关的索引为真，而其他状态始终为假

Question

  const [isItemExpand, setIsItemExpand] = useState([{ ind: 0, isExpand: false }])

这是我使相关状态为真的函数

 const handleExpand = (i: number) => {
     const newList = [...isItemExpand]
     newList[i] = { ind: i, isExpand: !isItemExpand[i].isExpand }
     setIsItemExpand(newList)
 }

我需要使与索引相关的状态为真，同时不等于索引的状态需要为假，我怎样才能在上面的相同函数中实现它

举个例子—— 在当前情况下，如果我展开（索引 1），然后展开（索引 2），我的数组看起来像

0: {ind: 0, isExpand: false}
1: {ind: 1, isExpand: true}
2: {ind: 2, isExpand: true}
3: {ind: 3, isExpand: false}

但在扩展（索引 2）之后我希望这样的数组

0: {ind: 0, isExpand: false}
1: {ind: 1, isExpand: false}
2: {ind: 2, isExpand: true}
3: {ind: 3, isExpand: false}

为了实现这一点，我需要将所有其他状态重置为 false expect 与索引匹配

Answer 1

如果我正确理解目标 - 只有一个元素应该有 isExpand = true - 那么你可以 map 项目并设置 false 或 true 取决于ind 条件

const handleExpand = (i: number) => {
  const newList = isItemExpand.map((item) => ({ ...item, isExpand: item.ind === i }));
  setIsItemExpand(newList);
};

已更新

const handleExpand = (i: number) => {
  const newList = isItemExpand.map((item) => 
    ({ ...item, isExpand: (item.ind === i) ? !item.isExpand : false });
  setIsItemExpand(newList);
};

使状态相关的索引为真，而其他状态始终为假

Make state related index make true while other state always false

javascript

arrays

ecmascript-6

reactjs

react-hooks