面试题：Solid.js 中如何在状态管理里处理多个相关状态的联动更新

Question

在 Solid.js 的状态管理场景下，假设有用户信息状态（姓名、年龄、地址），当用户年龄发生变化时，需要根据新年龄判断是否成年，并更新一个 `isAdult` 状态。请描述实现这个联动更新的思路，并且给出关键代码示例。

Answer 1

实现思路

1. 使用 Solid.js 的 createSignal 创建用户信息状态（姓名、年龄、地址）以及 isAdult 状态。
2. 使用 createEffect 来监听年龄的变化。当年龄变化时，判断新的年龄是否大于等于 18 来更新 isAdult 状态。

关键代码示例

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

const App = () => {
    // 创建用户信息状态
    const [name, setName] = createSignal('');
    const [age, setAge] = createSignal(0);
    const [address, setAddress] = createSignal('');
    // 创建 isAdult 状态
    const [isAdult, setIsAdult] = createSignal(false);

    // 监听年龄变化，更新 isAdult 状态
    createEffect(() => {
        setIsAdult(age() >= 18);
    });

    return (
        <div>
            <input type="text" placeholder="姓名" onInput={(e) => setName(e.target.value)} />
            <input type="number" placeholder="年龄" onInput={(e) => setAge(Number(e.target.value))} />
            <input type="text" placeholder="地址" onInput={(e) => setAddress(e.target.value)} />
            <p>是否成年: {isAdult() ? '是' : '否'}</p>
        </div>
    );
};

export default App;