Question

我是TypeScript的新手，有一个项目要在明天完成。我想做的是将json文件导入componentDidMount（）并在应用程序上进行渲染。我认为我至少在做正确的事情，因为当我将鼠标悬停在“响应”上时，我在JSON文件中获得了所有不同的键和值。我无法在我的应用程序上渲染它。

这是代码（不要介意searchField，我稍后再添加，并且在atm上没有错误）：

import * as React from "react";
import GameCardList from "../GameCardList";
import logo from "./logo.svg";

export interface IGame {
  Name: string;
  ID: number;
  Slug: string;
}

interface IAppProps {
}

interface IAppState {
  games: Array<IGame>;
  searchfield: string;
}

export class App extends React.Component<IAppProps, IAppState> {
  constructor(props: Readonly<IAppProps>) {
    super(props);
    this.state = {
      games: [],
      searchfield: ""
    };
  }

  componentDidMount() {
    import("../games.json")
      .then( response => response.json())
      //^^where the error is
      .then((users: any) => {this.setState({ games: users}); });
  }

  onSearchChange = (event: { currentTarget: { value: any; }; }) => {
    this.setState({ searchfield: event.currentTarget.value });
  }

  render() {
    const { games, searchfield } = this.state;
    const filteredGames = games.filter(game => {
      return game.Name.toLowerCase().includes(searchfield.toLowerCase());
    });
    return !games.length ?
      <h1>Hello I am Loading!!</h1> :
      (
        <div className="tc">
            <GameCardList games={filteredGames} />
        </div>
      );
  }
}

// tslint:disable-next-line:no-default-export
export default App;

有趣的是，我在另一个带有JSON文件的TS项目中使用了完全相同的代码，并且工作正常。嗯，我在做什么错了？

此外，关于在打字稿文件中导入JSON的主题，我可以遵循的任何资源或其他建议是什么？

Answer 1

您不需要.json()，因为您的响应已经是您需要的对象。

您可以通过打印响应进行测试：console.log(response)

“类型{}上不存在属性json” TypeScript

1 个答案: