React：使用map方法渲染列表后，如何仅修改当前点击元素的状态以变更其样式

这个问题很常见，核心原因是你当前用一个全局的currentStyle状态来控制所有列表项的样式——一旦修改这个状态，所有<li>都会同步应用新样式，自然没法单独控制某一项。咱们换个思路，跟踪被点击项的唯一标识，就能精准控制单个项的样式变化了，具体步骤如下：

1. 调整状态存储逻辑 #

不要直接存样式对象，而是存储当前被选中项的唯一ID（或者其他唯一标识，比如项的name如果唯一也可以，但推荐用ID）：

// 初始状态设为null，表示没有任何项被选中
const [selectedId, setSelectedId] = useState(null);

2. 定义默认样式和激活样式 #

把你想切换的样式拆成两个对象，方便后续判断使用：

const defaultStyle = { 
  color: '#333', 
  padding: '8px', 
  cursor: 'pointer' 
};
const activeStyle = { 
  color: '#2563eb', 
  padding: '8px', 
  fontWeight: 'bold', 
  backgroundColor: '#eff6ff',
  cursor: 'pointer'
};

3. 渲染列表时动态判断样式 #

在map遍历的时候，判断当前项的ID是否等于selectedId，以此决定应用哪种样式，同时给每个<li>添加点击事件，点击时把当前项的ID设置为selectedId：

{array.map(val => (
  <li
    key={val.id} // 必须添加唯一key，这是React列表渲染的要求
    style={selectedId === val.id ? activeStyle : defaultStyle}
    onClick={() => setSelectedId(val.id)}
  >
    {val.name}
  </li>
))}

完整代码示例 #

import { useState } from 'react';

function ItemList() {
  // 假设你的数组每个项都有唯一id（如果没有，建议给每个项添加唯一标识）
  const array = [
    { id: 1, name: '第一项' },
    { id: 2, name: '第二项' },
    { id: 3, name: '第三项' }
  ];

  const [selectedId, setSelectedId] = useState(null);
  
  const defaultStyle = { 
    color: '#333', 
    padding: '8px', 
    cursor: 'pointer' 
  };
  const activeStyle = { 
    color: '#2563eb', 
    padding: '8px', 
    fontWeight: 'bold', 
    backgroundColor: '#eff6ff',
    cursor: 'pointer'
  };

  return (
    <ul style={{ listStyle: 'none', padding: 0 }}>
      {array.map(val => (
        <li
          key={val.id}
          style={selectedId === val.id ? activeStyle : defaultStyle}
          onClick={() => setSelectedId(val.id)}
        >
          {val.name}
        </li>
      ))}
    </ul>
  );
}

export default ItemList;

特殊情况处理：如果列表项没有唯一ID #

如果你的数组项没有自带唯一ID，临时可以用遍历的index作为标识（但不推荐，因为列表增删时index会变化，可能导致意外问题）：

{array.map((val, index) => (
  <li
    key={index}
    style={selectedId === index ? activeStyle : defaultStyle}
    onClick={() => setSelectedId(index)}
  >
    {val.name}
  </li>
))}

扩展：支持多选场景 #

如果需要实现点击多选（即可以同时选中多个项），只需要把状态改成数组，存储所有选中项的ID即可：

const [selectedIds, setSelectedIds] = useState([]);

// 点击事件处理：切换当前项的选中状态
const handleItemClick = (id) => {
  setSelectedIds(prevSelected => {
    if (prevSelected.includes(id)) {
      // 如果已选中，移除该项ID
      return prevSelected.filter(itemId => itemId !== id);
    } else {
      // 如果未选中，添加该项ID
      return [...prevSelected, id];
    }
  });
};

// 样式判断
style={selectedIds.includes(val.id) ? activeStyle : defaultStyle}

内容的提问来源于stack exchange，提问作者Bette