Question

我慢慢地教自己NodeJs，Express，React，monogoDB和Typescript ..（来自MVC C＃SQL DB背景）

我非常简单的Hello world程序只需要与Express服务器通信以显示用户列表。我的Express服务器在端口3001上，我的Create-React-App前端在端口3000上。

我的App Component如下：

import * as React from 'react';
import './App.css';

const logo = require('./logo.svg');

class App extends React.Component {
  state = {users: []}
  componentDidMount(){
    console.log("Fetching Users");
    fetch('/users')
      .then(res=> res.json())
      .then(users=> this.setState({users}));
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React test</h2>
          {this.state.users.map(user => 
            <div key={user.id}>{user.username}</div>
          )}
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

错误：

（21,28）：错误TS2339：属性＆＃39; id＆＃39;类型＆＃39;从不＆＃39;上不存在。

我可以看到问题是我没有定义用户包含属性users.id和users.username ..但我不确定如何做到这一点？

Answer 1

我可能已经快速发布了这个问题。但我解决了我的答案

import * as React from 'react';
import './App.css';

const logo = require('./logo.svg');

interface Iuser {
  id: number,
  username: string
}

class App extends React.Component {
  state = {users: Array<Iuser>()}
  componentDidMount(){
    console.log("Fetching Users");
    fetch('/users')
      .then(res=> res.json())
      .then(users=> this.setState({users}));
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React test</h2>
          {this.state.users.map(user => 
            <div key={user.id}>{user.username}</div>
          )}
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

（为数组对象创建接口）

我之前尝试过此操作，但语法错误。

打字稿属性＆＃39;＆＃39;类型＆＃39;从不＆＃39;不存在。在React NodeJs堆栈中

1 个答案: