当我尝试将后端与 React 连接时，为什么它会返回“无法读取未定义的属性“地图”？

Question

我是 React 的初学者，我正在按照本教程 https://dev.to/kmaryam27/step-by-step-react-nodejs-and-mysql-simple-full-stack-application-2018-part-5-5a8c 将我的数据库与前端的 React 连接并显示数据。在第 5 部分的 express-react/backend/client/src 中运行 npm start localhost:3000 时，我不断收到 TypeError: Cannot read property 'map' of undefined。这是我的 express-react/backend/client/src/App.js：

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';

class App extends Component {
  state = {
    users:[]
  }
  componentDidMount(){
    this.getUsers();
  }

  getUsers = _ => {
        axios.get('/')
    .then((data) => {
      console.log(data.data.users);
      this.setState({users: data.data.users});
    })
    .catch(error => console.log(error));
  }
  showUsers = user => <div key={user.id}>{user.username}</div>
  render() {
    const { users } = this.state;
    return (
      <div className="App">
        {users.map(this.showUsers)}
      </div>
    );
  }
}

export default App;

当在 /express/backend 中运行 npm start 时，我会收到 Welcome to Express express localhost:3001，如果我按照教程第 3 部分中所示运行 node server，我可以在 localhost:3000 中看到数据库内容。

如果我在console.log(data.data.users); 上方放置一个debugger，我可以看到变量data 返回以下内容：

有人可以帮忙吗？

Answer 1

data.data 看起来包含一个字符串，而不是一个带有预期 users 键的对象。

您应该确保在后端使用有效的 JSON 进行回复（目前，它是一个 HTML 字符串）。