Javascript 带反应钩的动力学状态

我试图使用

map（）

函数呈现一个数组，同时使用一些已建立的状态为每个元素提供自己唯一的类名（基于索引值）。当使用挂钩单击时，元素应改变颜色。我遇到了一个问题，

className={“header”+{index}.index}

给出了正确的状态名（header0、header1等），但对应的是一个字符串，而不是使用相同名称建立的类名

const data = ["James", "John", "Jessica", "Jamie"];

export default function App() {
  const [header0, setHeader0] = useState("visable");
  const [header1, setHeader1] = useState("visable");
  const [header2, setHeader2] = useState("visable");
  const [header3, setHeader3] = useState("visable");

  const clicked = (index) => {
    if (index === 0) {
      setHeader0("invisible");
    } else if (index === 1) {
      setHeader1("invisible");
    }
    /*Is there an alternative like {setHeader + index} instead of this loop?*/
  };

  return (
    <div className="App">
      <h1>Sample Project</h1>
      {data.map((value, index) => (
        <h1
          className={"header" + { index }.index}
          onClick={() => {
            clicked(index);
          }}
        >
          {/* classname should be the state "header0" but right now its just a string */}
          Hello {value}!
        </h1>
      ))}
    </div>
  );
}

const data=[“詹姆斯”、“约翰”、“杰西卡”、“杰米”]；
导出默认函数App（）{
const[header0，setHeader0]=useState（“可视”）；
const[header1，setHeader1]=使用状态（“可视”）；
const[header2，setHeader2]=使用状态（“可视”）；
const[header3，setHeader3]=使用状态（“可视”）；
点击常量=（索引）=>{
如果（索引==0）{
setHeader0（“不可见”）；
}else if（索引===1）{
设置头1（“不可见”）；
}
/*有没有像{setHeader+index}这样的替代方法来代替这个循环*/
};
返回(
样本项目
{data.map（（值，索引）=>(
{
点击（索引）；
}}
>
{/*classname应该是状态“header0”，但现在它只是一个字符串*/}
你好{value}！
))}
);
}

下面是我正在尝试的代码沙盒，其中包含一些出错的注释。我处理这个问题的方法正确吗？

---

非常感谢您的帮助

您在单击的函数中声明了2个参数，因此

e

是实际索引

应该是

const clicked = (index) => {

---

恐怕这不是一个好方法，但您可以尝试以下方法：

import React，{useState，useffect}来自“React”；
导入“/styles.css”；
常量数据=[“詹姆斯”、“约翰”、“杰西卡”、“杰米”]；
导出默认函数App（）{
常量头=[]；
[标题[0]、标题[1]、标题[2]、标题[3]=[
useState（“可视”），
useState（“可视”），
useState（“可视”），
useState（“可视”）
]；//每个头[index]是一个带有[state，setState function]的数组
点击常量=（索引）=>{
警报（“单击”+索引）；
标题[索引][1]（“不可见”）；
/*有没有像{setHeader+index}这样的替代方法来代替这个循环*/
};
返回(
样本项目
{data.map（（值，索引）=>(
{
点击（索引）；
}}
>
{/*classname应该是状态“header0”，但现在它只是一个字符串*/}
你好{value}！
))}
);
}

---

代码笔：

您可以使用单个状态数组来实现可见性

此外，如果您将索引隐藏在单击元素的HTML数据集中（

数据索引

），则不需要为每个索引使用单独的闭包/函数

const data=[“詹姆斯”、“约翰”、“杰西卡”、“杰米”]；
函数App（）{
const[visibilies，setvisibilies]=React.useState（（）=>data.map（（x）=>true））；
常量handleClick=（事件）=>{
const index=parseInt（event.currentTarget.dataset.index，10）；
常数newVisibilities=[…可视性]；
newVisibilities[index]=！newVisibilities[index]；
设置可视性（新可视性）；
};
返回(
{data.map（（值，索引）=>(
您好{value}，您是{可视性[索引]？“可见”：“隐藏”}！
))}
);
}
ReactDOM.render（，document.querySelector（“main”））
。已选定{
背景：浅绿色；
}
h1{
光标：指针；
用户选择：无；
}
您可以更改将状态构造为数组的方式，然后单击函数将通过索引使其不可见

const data=[“詹姆斯”、“约翰”、“杰西卡”、“杰米”]；
导出默认函数App（）{
const[headersVisible，setheaderservible]=useState(
data.map（（）=>“可见”）
);
点击常量=（索引）=>{
可设置的(
headersVisible.map（（val，ix）=>（index==ix？“不可见”：val））
);
};
返回(
样本项目
{data.map（（值，索引）=>(
单击（索引）}
>
{/*classname应该是状态“header0”，但现在它只是一个字符串*/}
你好{value}！
))}
);
}
啊，我明白了，谢谢！好的，修正了这个问题，所以我得到了正确的索引onClick。但是，状态仍然没有更新。。它一定与行
className={“header”+{index}.index}
有关，但我不知道还有什么替代方法哇，这看起来很干净。这个解决方案是否也允许更新CSS？例如，如果单击James，我可以将颜色设置为红色吗？当然，让我更新代码片段以反映这一点。完成交易，@Jschriemer:）这非常有效！谢谢你@Sarabadu