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

Question

I'm a beginner in React and I'm following this tutorial https://dev.to/kmaryam27/step-by-step-react-nodejs-and-mysql-simple-full-stack-application-2018-part-5-5a8c to connect my database with React in front end and display the data. I kept getting TypeError: Cannot read property 'map' of undefined when running npm start at localhost:3000 in express-react/backend/client/src in part 5. Here is my 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;

I get Welcome to Express express at localhost:3001 when running npm start in /express/backend, and if I run node server as shown in tutorial part 3, I could see the database content in localhost:3000 .

If I place a debugger above console.log(data.data.users); , I could see variable data returns this:

Could someone help please?

Answer 1

data.data looks to contain a string instead of an object with the expected users key.

You should make sure you reply within the backend with a valid JSON (currently, it's an HTML as string).