面试题：Solid.js 中如何在 JSX 里实现动态列表渲染

Question

假设你有一个数组，数组中的每个元素是一个对象，对象包含 'name' 和 'age' 两个属性。请使用 Solid.js 结合 JSX 实现将这个数组渲染成一个列表，列表中每个项展示姓名和年龄。同时，当数组中的某个对象的 'age' 属性发生变化时，列表能自动更新。

Answer 1

import { createSignal } from 'solid-js';

const App = () => {
  const data = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
  ];
  const [list, setList] = createSignal(data);

  const handleAgeChange = (index, newAge) => {
    const newData = [...list()];
    newData[index].age = newAge;
    setList(newData);
  };

  return (
    <ul>
      {list().map((item, index) => (
        <li key={index}>
          {item.name}: {item.age}
          <input
            type="number"
            value={item.age}
            onChange={(e) => handleAgeChange(index, parseInt(e.target.value))}
          />
        </li>
      ))}
    </ul>
  );
};

export default App;