切换活动状态与钩子反应

Question

我正在使用React钩子并遇到了一些我不确定该怎么做的事情。

我有一个父组件，用于呈现城市列表。

const Cities = ({ cities = ["London", "Barcelona", "Los Angeles", "New York"] }) => {
  return (
    <>
      {cities.map(city => {
        const [isActive, setActive] = useState(false);
        return <p onClick={() => setActive(true)} style={{ color: isActive ? "red" : "green" }}>{city}</p>;
      })}
    </>
  );
};

我遇到的问题是，每次我点击一个城市它都会变成red，但是我只想让一个人在任何时候变成红色（即最近点击的一个）。

如果对此问题有任何疑问，请告诉我。

在类组件中，我想我可能会做类似于this的事情。

请参阅代码sandbox here。

Answer 1

如果一次只能选择一个城市，则不需要为所有城市都设置状态值。只需将当前选定的一个保留在单个状态属性中：

const Cities = ({ cities = ["London", "Barcelona", "Los Angeles", "New York", "Wigan"] }) => {
    const [activeCity, setCity] = useState(null);

    return (
        <>
            {cities.map(city => <p key={city} onClick={() => { setCity(city) }} style={{ color: activeCity === city ? "red" : "green" }}>{city}</p>)}
        </>
    );
};

Answer 2

如果只有一个城市可以是红色的，你不应该使用循环中的钩子（实际上你永远不应该做的事情），而是在渲染之上保持一个活动状态，例如：

const App = ({ cities = ["London", "Manchester", "Leeds"] }) => {
  const [active, setActive] = useState(false)

  const City = ({ name }) => (
    <p
      onClick={ () => setActive(name) }
      style={{ color: active === name ? "red" : "green" }}
    >
      { name }
    </p>
  )

  return (
    <>
      { cities.map(city => <City name={ city } />) }
    </>
  );
};

你可以在这里找到我的工作代码盒：https://codesandbox.io/s/o58342l64z

为了个人的清晰，我也自由地重构了一点。