Javascript 反应：如何传递每个映射数组项的状态？

我在函数组件中使用Array.map方法呈现了一个按钮列表。当我尝试将状态传递给每个映射的数组项时，渲染结果一次更改了所有数组项，而不是逐个更改

这是我的密码。我做错什么了吗？抱歉，如果问题已在其他线程中解决，或者我使用了错误的方法。这是我的第一个React项目，我还在学习。如果有人能提供建议，我们将不胜感激。谢谢大家!

import React, { useState } from "react"

export default function Comp() {
  const [isActive, setActive] = useState(false)

  const clickHandler = () => {
    setActive(!isActive)
    console.log(isActive)
  }

  const data = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
    { id: 3, name: "Charlie" },
  ]

  const renderList = items => {
    return items.map(item => (
      <li key={item.id}>
        <button onClick={clickHandler}>
          {item.name} {isActive ? "active" : "not active"}
        </button>
      </li>
    ))
  }

  return (
    <ul>{renderList(data)}</ul>
  )
}

import React，{useState}来自“React”
导出默认函数Comp（）{
常量[isActive，setActive]=useState（false）
常量clickHandler=（）=>{
setActive（！isActive）
console.log（isActive）
}
常数数据=[
{id:1，名字：“Alice”}，
{id:2，名字：“Bob”}，
{id:3，名字：“查理”}，
]
const renderList=items=>{
返回items.map（item=>(

{item.name}{isActive？“active”：“notactive”}

))
}
返回(
{renderList（data）}
)
}

将单个项目放入不同的组件中，以便每个组件都有自己的

活动状态：

export default function Comp() {
  const data = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
    { id: 3, name: "Charlie" },
  ]

  const renderList = items => (
    items.map(item => <Item key={item.id} name={item.name} />)
  );

  return (
    <ul>{renderList(data)}</ul>
  )
}
const Item = ({ name }) => {
  const [isActive, setActive] = useState(false);
  const clickHandler = () => {
    setActive(!isActive);
  };
   return (
    <li>
      <button onClick={clickHandler}>
        {name} {isActive ? "active" : "not active"}
      </button>
    </li>
  );
};

导出默认函数Comp（）{
常数数据=[
{id:1，名字：“Alice”}，
{id:2，名字：“Bob”}，
{id:3，名字：“查理”}，
]
const renderList=items=>(
items.map（item=>）
);
返回(
{renderList（data）}
)
}
常量项=（{name}）=>{
const[isActive，setActive]=useState（false）；
常量clickHandler=（）=>{
setActive（！isActive）；
};
返回(

{name}{isActive？“active”：“notactive”}

);
};
您需要在处理
点击事件时设置
活动id
。这将依次有条件地呈现活动/非活动
：

注意流程
（1）>（2）>（3）

函数Comp（）{
const[activeId，setActiveId]=React.useState（null）；
常量clickHandler=（项目）=>{
setActiveId（item.id）/（2）单击处理程序将设置活动id
}
常数数据=[
{id:1，名字：“Alice”}，
{id:2，名字：“Bob”}，
{id:3，名字：“查理”}，
]
const renderList=items=>{
返回items.map（item=>(

clickHandler（item）}>/（1）传递单击的项目，以便我们可以设置活动id
{item.name}{item.id==activeId？
“活动”：“非活动”//（3）有条件地呈现
}

))
}
返回(
{renderList（data）}
)
}

祝你好运