面试题：Solid.js中条件渲染结合列表的基本实现

Question

假设你有一个包含用户信息的数组，每个用户对象有一个`isActive`属性表示用户是否活跃。请使用Solid.js实现一个列表，仅显示活跃用户的姓名，同时要处理列表项的点击事件，点击后能切换用户的活跃状态。

Answer 1

import { createSignal, JSX } from 'solid-js';

interface User {
  name: string;
  isActive: boolean;
}

const users: User[] = [
  { name: 'Alice', isActive: true },
  { name: 'Bob', isActive: false },
  { name: 'Charlie', isActive: true }
];

const App: () => JSX.Element = () => {
  const [activeUsers, setActiveUsers] = createSignal(users.filter(user => user.isActive));

  const handleClick = (user: User) => {
    const newUsers = activeUsers().map(u => {
      if (u === user) {
        return {...u, isActive:!u.isActive };
      }
      return u;
    });
    setActiveUsers(newUsers);
  };

  return (
    <ul>
      {activeUsers().map(user => (
        <li key={user.name} onClick={() => handleClick(user)}>
          {user.name}
        </li>
      ))}
    </ul>
  );
};

export default App;