Arrays inside.map（）样式；这"；compent（React.js）

我已经映射了一个对象数组，如果我单击其中一个元素，我想将该元素的颜色更改为红色（通过添加CSS类），但它总是将所有元素的颜色都更改为红色。我以为React会自动获取上下文？我还需要使用“this”吗

import React，{useState}来自“React”；
导入“./Map.css”；
常数Arr=[
{
id:“i1”，
项目：“项目1”，
},
{
id:“i2”，
项目：“项目2”，
},
{
id:“i3”，
项目：“项目3”，
},
];
常量列表元素=（道具）=>{
return
{props.children}
；
};
常量映射=（）=>{
常量[changedStyle，SetChangedStyle]=useState（false）；
常量styleHandler=（）=>{
changedStyle？SetChangedStyle（假）：SetChangedStyle（真）；
控制台日志（“单击”）；
console.log（changedStyle）；
};
常数列表=Arr.map（（l，索引）=>(
{l.item}
));
退货清单；
};
导出默认地图
.map选择{color:red；}
问题
这里的问题是
changedStyle
是一个状态变量。因此，它不是数组元素独有的，而是影响所有元素，因为它是
react
组件的状态。您需要将
changedStyle
作为元素中的属性

解决办法
元素中需要有一个
changedStyle
标志。单击时，可以使用
onClick
更改数组中的元素。您将根据标志
l.changedStyle
动态分配类名。您希望数组是一个状态变量，以便react组件在更改后重新渲染

import React, { useState } from "react";

import './Map.css';

const Arr = [
  {
    id: "i1",
    item: "item-1",
    changedStyle: false
  },
  {
    id: "i2",
    item: "item-2",
    changedStyle: false
  },
  {
    id: "i3",
    item: "item-3",
    changedStyle: false
  },
];

const ListElement = (props) => {
  return <li className={props.className} onClick={props.onClick}>{props.children}</li>;
};

const Map = () => {
  const [arr, setArr] = useState(Arr)
  const styleHandler = (index) => {
    const newArr = [...arr]
    const element = newArr[index]
    newArr.splice(index, 1, {...element, changedStyle: !element.changedStyle}
    setArr(arr)
  };

  const List = arr.map((l, index) => (
    <ListElement key={index} onClick={() => styleHandler(index)} className={l.changedStyle ? 'map-selected' : ''}>
      {l.item}
    </ListElement>
  ));

  return List;
};

export default Map;

import React，{useState}来自“React”；
导入“./Map.css”；
常数Arr=[
{
id:“i1”，
项目：“项目1”，
changedStyle:false
},
{
id:“i2”，
项目：“项目2”，
changedStyle:false
},
{
id:“i3”，
项目：“项目3”，
changedStyle:false
},
];
常量列表元素=（道具）=>{
return
{props.children}
；
};
常量映射=（）=>{
const[arr，setArr]=使用状态（arr）
常量styleHandler=（索引）=>{
常数newArr=[…arr]
常量元素=newArr[索引]
newArr.splice（索引，1，{…元素，changedStyle:！元素.changedStyle}
setArr（arr）
};
常数列表=arr.map（（l，索引）=>(
styleHandler（索引）}className={l.changedStyle？'map selected'：''}>
{l.item}
));
退货清单；
};
导出默认地图；

推荐
如果数组元素中有唯一的
id
或
key
，请不要在jsx中使用
key={index}
，而是使用
key={l.id}
解决问题
这里的问题是
changedStyle
是一个状态变量。因此，它不是数组元素独有的，而是影响所有元素，因为它是
react
组件的状态。您需要将
changedStyle
作为元素的属性

解决办法
元素中需要有一个
changedStyle
标志。单击时可以使用
onClick
更改数组中的元素。您将根据标志
l.changedStyle
动态分配一个类名。您希望数组成为一个状态变量，以便react组件在更改后重新呈现

import React, { useState } from "react";

import './Map.css';

const Arr = [
  {
    id: "i1",
    item: "item-1",
    changedStyle: false
  },
  {
    id: "i2",
    item: "item-2",
    changedStyle: false
  },
  {
    id: "i3",
    item: "item-3",
    changedStyle: false
  },
];

const ListElement = (props) => {
  return <li className={props.className} onClick={props.onClick}>{props.children}</li>;
};

const Map = () => {
  const [arr, setArr] = useState(Arr)
  const styleHandler = (index) => {
    const newArr = [...arr]
    const element = newArr[index]
    newArr.splice(index, 1, {...element, changedStyle: !element.changedStyle}
    setArr(arr)
  };

  const List = arr.map((l, index) => (
    <ListElement key={index} onClick={() => styleHandler(index)} className={l.changedStyle ? 'map-selected' : ''}>
      {l.item}
    </ListElement>
  ));

  return List;
};

export default Map;

import React，{useState}来自“React”；
导入“./Map.css”；
常数Arr=[
{
id:“i1”，
项目：“项目1”，
changedStyle:false
},
{
id:“i2”，
项目：“项目2”，
changedStyle:false
},
{
id:“i3”，
项目：“项目3”，
changedStyle:false
},
];
常量列表元素=（道具）=>{
return
{props.children}
；
};
常量映射=（）=>{
const[arr，setArr]=使用状态（arr）
常量styleHandler=（索引）=>{
常数newArr=[…arr]
常量元素=newArr[索引]
newArr.splice（索引，1，{…元素，changedStyle:！元素.changedStyle}
setArr（arr）
};
常数列表=arr.map（（l，索引）=>(
styleHandler（索引）}className={l.changedStyle？'map selected'：''}>
{l.item}
));
退货清单；
};
导出默认地图；

推荐
如果数组元素中有唯一的
id
或
key
，请不要在jsx中使用
key={index}
，而是使用
key={l.id}
而不是使用标志来更改颜色。您需要维护一个列表，该列表将在选中时将所选项目的索引推送到列表中，并在再次单击时将其弹出

const Map = () => {
  const [ selectedItems , setSelectedItems] = useState([]);

  const styleHandler = (itemIndex) => {
    if(selectedItems.includes(itemIndex))
    {
      setSelectedItems(prevSelectedItems => prevSelectedItems.filter((item) => item !== itemIndex))
    } else {
      setSelectedItems(prevSelectedItems => [...prevSelectedItems, itemIndex])
    }
  };

  const List = Arr.map((l, index) => (
    <ListElement key={index} onClick={() => styleHandler(index)} className={selectedItems.includes(index) ? 'map-selected' : ''}>
      {l.item}
    </ListElement>
  ));

  return List;
};

当项目索引出现在selectedItems中时，我们应用样式

className={selectedItems.includes(index) ? 'map-selected' : ''}

这样，就无需维护添加标志或修改源数据。
而无需使用标志来更改颜色。您需要维护一个列表，该列表将在选中时将所选项目的索引推送到列表中，并在再次单击时将其弹出

const Map = () => {
  const [ selectedItems , setSelectedItems] = useState([]);

  const styleHandler = (itemIndex) => {
    if(selectedItems.includes(itemIndex))
    {
      setSelectedItems(prevSelectedItems => prevSelectedItems.filter((item) => item !== itemIndex))
    } else {
      setSelectedItems(prevSelectedItems => [...prevSelectedItems, itemIndex])
    }
  };

  const List = Arr.map((l, index) => (
    <ListElement key={index} onClick={() => styleHandler(index)} className={selectedItems.includes(index) ? 'map-selected' : ''}>
      {l.item}
    </ListElement>
  ));

  return List;
};

当项目索引出现在selectedItems中时，我们应用样式

className={selectedItems.includes(index) ? 'map-selected' : ''}

这样，就不需要维护添加标志或修改源数据。
这涉及到对源数据的额外转换，用户现在需要在源列表中进行映射，并为其所有项添加一个新的键
changedStyle
。这是正确的。有多种方法可以做到这一点，您的答案可能是正确的更好的性能。这涉及到对源数据的额外转换，用户现在需要映射到他的源列表，并为其所有项添加一个新的键
changedStyle
。这是正确的。有多种方法可以做到这一点，您的答案可能更符合性能。非常感谢Shyam，这对于添加CSS类，但当我再次单击该元素时，它会从其他元素中删除CSS类。更新答案，在筛选器中出错它必须是
（item）=>item！==itemIndex）
您是一个