在 reactjs 中使用 useState 挂钩更新对象数组

Question

I have this state of array of object. I use them to create three cards.

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,
  }
]);

Whenever one of these cards is clicked, I would like to update the field isActive to true as follows.

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

My code somewhat looks the above one. but it is not literally changing isActive filed

Answer 1

You are mutating the options array. When you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array.

Below will fix your issue

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

Answer 2

options is an array. You will want to map the previous state array to the next state array, updating the specific element object by the id property.

const [options, setOptions] = useState(option);

// Curried function to close over option id in callback scope
const handleChange = (id) => () => {
  setOption(options => options.map(option => option.id === id
    ? { ...option, isActive: true }
    : option
  );
}

options.map((opt) => (
  <Card
    key={opt.id}
    onClick={handleChange(opt.id)}
    className={opt.isActive ? "activecard" : ""}
  >
    <CardContent>
      <Stack direction="column">
        <opt.icon size={20} />
        <Typography>opt.label</Typography>
      </Stack>
    </CardContent>
  </Card>
)

Answer 3

There are several issues going on here, the first being you should be using the useCallback hook when you are updating anything set in useState :

export default function FixedHeader() {
  const [options, setOptions] = useState(myOptions);

  const onClick = useCallback((id) => {
    setOptions(options.map((opt) => {
      if (opt.id === id) {
        opt.isActive = !opt.isActive
      }
      return opt
    })
  )}, [options])

  return (
    <div>
      {
        options.map((option) => (
          <div style={{ backgroundColor: option.isActive ? 'blue' : 'red' }}>
            <button onClick={() => onClick(option.id)}>{option.label}</button>
          </div>
        ))
      }
    </div>
  );
}

Note that I was rendering something different than you to test this out, so make sure instead of passing in the index you pass the option.id like so:

onClick={() => onClick(option.id)}