React Hook不允许我在获取调用后显示单个对象

我正在React Hooks项目上使用访存调用标准JSON文件。 (我正在模拟使用JSON-Server的服务器来读取本地json文件)

在我的主要函数中,我正在调用一个变量和一个函数,就像任何普通的React Hook一样,并将其设置为空数组,因为我正在使用访存来调用API数据。

let [items, setItems] = useState([]);


    const fetchItems = async () => {
        const url = "http://localhost:3002/learn";
        const response = await fetch(url);
        items = await response.json();

The console.log(items[0].title) does in fact return the correct value.


{ => 
   <img src={item.source} alt={item.title} title={item.title}  className="img-fluid mx-auto d-block" />

However, once I want to display a single value in my return, I get an error message saying: "TypeError: Cannot read property 'source' of undefined" The code that I'm using, just to test at first is the same exact thing as my console.log from before.

<img src={items[0].source} alt={items[0].title} title={items[0].title}  className="img-fluid mx-auto d-block" />


If I were to hard-code my JSON data on the same component, it would work. I feel like it has something to do with fetch. I was looking at this question, and it's similar, but not the same thing. I'm also using hooks and also not axios. Can't display data after fetch

更新: JSON文件如下所示:

    "learn": [
        "id": 1,
        "title": "Angular JS",
        "source": "./images/logo-angular-js.png"
        "id": 2,
        "title": "Firebase",
        "source": "./images/logo-firebase.png"
        "id": 3,
        "title": "GraphQL",
        "source": "./images/logo-graphql.png"