reactjs - 使用reactjs中的useState钩子(Hook)更新对象数组

Question

我有对象数组的这种状态。我用它们创建了三张卡片。

const [option, setOption] = useState([{
    id: 1,
    label: "Borrowers",
    icon: FcApprove,
    counter: 2,
    link: "borrowers",
    color: "#5d8c6d",
    isActive: false,
  },
  {
    id: 2,
    label: "My Offer",
    icon: FaHandsHelping,
    counter: 2,
    link: "offer",
    color: "#04738a",
    isActive: false,
  },
  {
    id: 3,
    label: "Promise",
    icon: FaPrayingHands,
    counter: 2,
    link: "promise",
    color: "#40437a",
    isActive: false,
  }
]);

每当点击其中一张卡片时，我都会将字段 isActive 更新为 true，如下所示。

function FixedHeader() {
  const [options, setOptions] = useState(option); //option is the above mentioned array of object
  const handleChange = (opt) => {
    setOption([option[index].isActive: true])
  }
  return < > {
    options.map((opt, index) => {
      <Card onClick={handleChange(opt,index)} key={index} className={opt.isActive ? "activecard": ""}>
        <CardContent>
          <Stack direction="column">
            <opt.icon size={20}/>
            <Typography>opt.label</Typography>
          </Stack>
        </CardContent>
      </Card>
    })
  }

我的代码看起来有点像上面的代码。但它并没有真正改变 isActive 提交

Answer 1

您正在改变 options 数组。当您想要更新存储在状态中的数组时，您需要创建一个新数组(或复制现有数组)，然后设置状态以使用新数组。

下面将解决您的问题

const handleChange = (options, index) => {
  setOption(options.map((option, i) =>  ({...option, isActive: i === index }));
}