在React中如何使用map函数修改第一个元素的CSS样式？

核心原则：遵循React状态不可变更新 #

React的状态更新依赖不可变值，直接修改原数组/对象会导致React无法检测到状态变化，进而不触发重渲染。所以所有更新操作都要基于原数据创建新的副本。

场景1：手动触发更新，仅启用第一个用户 #

假设你用useState管理用户列表，要手动触发操作来启用第一个用户：

import { useState } from 'react';

function UserList() {
  // 初始化用户列表状态
  const [users, setUsers] = useState([
    { id: 1, name: '张三', enabled: false },
    { id: 2, name: '李四', enabled: false },
    { id: 3, name: '王五', enabled: false }
  ]);

  // 启用第一个用户的函数
  const enableFirstUser = () => {
    if (users.length === 0) return; // 空数组直接返回，避免报错

    // 1. 复制原数组，创建新数组副本
    const updatedUsers = [...users];
    // 2. 复制第一个用户对象，修改enabled属性（不可直接修改原对象）
    updatedUsers[0] = { ...updatedUsers[0], enabled: true };
    // 3. 更新状态
    setUsers(updatedUsers);
  };

  return (
    <div>
      <button onClick={enableFirstUser}>启用第一个用户</button>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} - {user.enabled ? '已启用' : '未启用'}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

场景2：数组自动更新时，始终启用第一个用户 #

如果希望**每次数组发生变化（比如新增/删除用户）**时，自动将第一个用户设为启用状态，可以用useEffect监听数组变化：

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([
    { id: 1, name: '张三', enabled: false },
    { id: 2, name: '李四', enabled: false }
  ]);

  // 监听users数组变化，自动启用第一个用户
  useEffect(() => {
    if (users.length === 0) return;
    // 避免重复更新：如果第一个用户已经启用，就不执行操作
    if (!users[0].enabled) {
      const updatedUsers = [...users];
      updatedUsers[0] = { ...updatedUsers[0], enabled: true };
      setUsers(updatedUsers);
    }
  }, [users]); // 依赖数组：users变化时触发

  // 模拟新增用户的操作
  const addUser = () => {
    const newUser = { id: Date.now(), name: `新用户${Date.now()}`, enabled: false };
    setUsers([...users, newUser]);
  };

  return (
    <div>
      <button onClick={addUser}>新增用户</button>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} - {user.enabled ? '已启用' : '未启用'}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

场景3：处理Props传递的数组 #

如果用户列表是通过Props传入的，不想修改原Props数据，可以用useMemo生成处理后的数组：

import { useMemo } from 'react';

function UserList({ users }) {
  // 仅当users变化时，生成处理后的数组（第一个用户启用）
  const processedUsers = useMemo(() => {
    if (!users || users.length === 0) return [];
    return users.map((user, index) => {
      return index === 0 ? { ...user, enabled: true } : user;
    });
  }, [users]);

  return (
    <ul>
      {processedUsers.map(user => (
        <li key={user.id}>
          {user.name} - {user.enabled ? '已启用' : '未启用'}
        </li>
      ))}
    </ul>
  );
}

export default UserList;

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