javascript - React状态钩子(Hook)，toogle类，为什么两个元素都获得 "active"类？

Question

希望你能帮助我。

为什么我的两个 li 元素都应用了 active 类？

import React, { useState } from "react";
import "./styles.css";

const App = () => {
  const [active, setActive] = useState("false");

  const creditValues = [
    {
      month: 6,
      monthly: 102.72,
      interest: 24.36,
      cost: 616.32,
      total: 591.96
    },
    {
      month: 12,
      monthly: 53.15,
      interest: 24.36,
      cost: 616.32,
      total: 591.96
    }
  ];

  return (
    <ul className="monthly-instalments">
      {creditValues.map(creditValue => (
        <li
          className={setActive ? "active" : "notactive"}
          data-month={creditValue.month}
          data-interval={creditValue.interval}
          data-apr={creditValue.apr}
          data-monthly={creditValue.monthly}
          data-interest={creditValue.interest}
          data-cost={creditValue.cost}
          data-total={creditValue.total}
          onClick={() => setActive(!active)}
        >
          {creditValue.month} months
        </li>
      ))}
    </ul>
  );
};

export default App;

Answer 1

在当前示例中，两个列表项共享相同的状态。

因此，在每次渲染时，切换状态都会同时反射(reflect) <li/>项目。

您希望每个列表项都有自己的 active状态。

请注意，您有一些错误，例如字符串 'false' ，比较 className与 setActive功能并且没有 noactive CSS 类。

import React, { useState } from 'react';
import './styles.css';

const creditValues = [
  {
    month: 6,
    monthly: 102.72,
    interest: 24.36,
    cost: 616.32,
    total: 591.96,
  },
  {
    month: 12,
    monthly: 53.15,
    interest: 24.36,
    cost: 616.32,
    total: 591.96,
  },
];

const Item = ({ children }) => {
  const [active, setActive] = useState(false);

  return (
    <li
      className={active ? 'active' : 'noactive'}
      onClick={() => setActive(p => !p)}
    >
      {children}
    </li>
  );
};

const App = () => {
  return (
    <ul className="monthly-instalments">
      {creditValues.map((creditValue, index) => (
        <Item key={index}>{creditValue.month} months</Item>
      ))}
    </ul>
  );
};

export default App;