面试题：Solid.js JSX事件处理中的状态更新

假设在Solid.js应用中有一个列表，每个列表项都有一个删除按钮。点击删除按钮时，需要从列表中移除对应的项并更新UI。请描述实现这一功能的详细步骤，并写出关键代码，同时说明在事件处理过程中如何确保状态更新的正确触发和UI的同步更新。

35.6万热度

难度

前端开发Solid.js

实现步骤：
- 定义列表数据：在Solid.js应用中，首先要定义一个状态来存储列表数据。
- 渲染列表：使用循环遍历列表数据，渲染每个列表项，并在每个列表项中添加删除按钮。
- 定义删除处理函数：该函数接受要删除项的索引或标识，从列表数据中移除该项。
- 绑定事件：将删除处理函数绑定到删除按钮的点击事件上。

关键代码：

import { createSignal } from'solid-js';

const App = () => {
    const [list, setList] = createSignal([
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
    ]);

    const handleDelete = (id) => {
        setList((prevList) => prevList.filter(item => item.id!== id));
    };

    return (
        <div>
            <ul>
                {list().map(item => (
                    <li key={item.id}>
                        {item.text}
                        <button onClick={() => handleDelete(item.id)}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default App;

状态更新与UI同步：
- 在Solid.js中，使用createSignal创建的状态，当通过setList函数更新状态时，Solid.js会自动跟踪状态的变化。
- 当handleDelete函数调用setList更新列表数据时，Solid.js会检测到状态的变化，并重新运行依赖该状态的JSX代码（即列表渲染部分），从而确保UI与新的状态同步更新。因为列表渲染依赖list状态，状态变化就会触发UI重新渲染，展示更新后的列表。

星途面试题库

面试题：Solid.js JSX事件处理中的状态更新

知识考点

面试题答案