react-typescript - 图片无法在我的本地计算机中显示(但它在 stackblitz 中有效)

Question

目标:
通过我本地计算机上的本地爱好项目中使用的代码显示来自 API 的图片。

问题:
当我将 stackblitz 中的代码用于本地计算机时，出现错误

TS2339: Property 'avatar_url' does not exist on type 'never'.

TS2339: Property 'login' does not exist on type 'never'.

但是，当在 stackblitz 中使用相同的代码时，它会起作用。换句话说，它是用于 stackblitz 和本地项目的相同代码，但它在本地开发计算机上不起作用

为了让代码在我的本地计算机上运行，​​我缺少什么部分？

堆栈 Blitz :
https://stackblitz.com/edit/react-ts-dah6xw ？

信息:
React TS新手

谢谢!

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

interface AppProps {}
interface AppState {
  name: string;
}

const apiUrl = 'https://api.github.com/users';

function App() {
  const [items, setItems] = React.useState([]);

  React.useEffect(() => {
    async function fetchData() {
      var data = await fetch(apiUrl).then((res) => {
        return res.json();
      });
      //console.log(data);
      setItems(data);
      console.log(data);
    }
    fetchData();
  }, []);

  return (
    <div>
      {items.map((item) => (
        <div>
          <img src={item.avatar_url} />
          <div>{item.login}</div>
        </div>
      ))}
      ;
    </div>
  );
}

render(<App />, document.getElementById('root'));

Answer 1

尝试将类型赋予 useState()，例如:

type User = {
  avatar_url: string;
  login: string;
};

///
const [items, setItems] = React.useState<User[]>([]);

我猜您的配置对于 linting 和 TS 错误非常激进。通常 React 在编译时不会显示此类错误。