Javascript 根据用户输入id从JSON按名称获取项目

嘿，我如何根据用户输入的内容从JSON文件中按名称获取项目？我有一个JSON文件，它有一个id和名称。我希望用户输入一个数字，然后显示与该id号关联的项目名称。我正在为此使用ReactJS。如有任何建议，将不胜感激。谢谢

您可以将JSON文件作为Javascript对象或数组读取。 我用鱼钩。对不起，我的英语很差

import { useState } from 'react';
import jsonData from './data.json';

export default function Test() {
    const [name, setName] = useState('');

    const onChange = (e) => {
        // jsonData is javascript array when import it
        const data = jsonData.find((d) => d.id == e.target.value);

        if (data) {
            setName(data.name);
        }
    };

    return (
        <div>
            <input onChange={onChange} />
            <p>Name: {name}</p>
        </div>
    );
}

---

可以包含一段JSON吗？查看Object.values（JSON变量）和Object.keys（JSON变量）

[
    {
        "id": 1,
        "name": "abc"
    },
    {
        "id": 2,
        "name": "def"
    },
    {
        "id": 3,
        "name": "ghi"
    }
]