localhost:3000 和 Internet 上的生产服务器 (localhost:5000) 上的代码相同但行为不同

Question

I am trying to learn React Js but I can't solve the error I am getting: One of my components work well on the local server Localhost:3000, but the same code shows an error on the production server localhost:5000 or at my domain on the Internet.

TypeError: this.state.students.map is not a function
    at a.value (View.js:23)
    at a.value (View.js:42)
    at Vi (react-dom.production.min.js:187)
    at Bi (react-dom.production.min.js:186)
    at Wl (react-dom.production.min.js:269)
    at Ou (react-dom.production.min.js:250)
    at Cu (react-dom.production.min.js:250)
    at xu (react-dom.production.min.js:250)
    at vu (react-dom.production.min.js:243)
    at react-dom.production.min.js:123

This is my code:

import React, { Component } from 'react';
import Axios from 'axios';
import RecordsList from './RecordsList';

export default class View extends Component {

    constructor(props) {
        super(props);
        this.state = { students: [] };
    }

    componentDidMount() {
        Axios.get('http://pdp.1fortwo.com/php/list.php')
            .then(response => {
                this.setState({ students: response.data });
            })
            .catch(function (error) {
                console.log(error);
            })
    }

    usersList() {
        return this.state.students.map(function (object, i) {
            return <RecordsList obj={object} key={i} />;
        });
    }

    render() {
        return (
            <div>
                <h3 align="center">Users List</h3>
                <table className="table table-striped" style={{ marginTop: 20 }}>
                    <thead>
                        <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email</th>
                            <th colSpan="2">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.usersList()}
                    </tbody>
                </table>
            </div>
        );
    }
}

Answer 1

The reason is because http://pdp.1fortwo.com/php/list.php returns an empty response (as I saw here ) so when you call this.setState({ students: response.data }); this.state.students.map is left undefined and thus can't be mapped over.

You need to find out why your backend is returning an empty response on production.

Answer 2

map() 是一种属于 Array 类型的方法，所以我猜当您在另一台服务器上时，您从 componentDidMount 中的 Axios.get 获得的响应不会返回 Array 类型。

Answer 3

My data in DB are utf-8 encoded what appeared to be a problem for json_encode function in my PHP file (list.php). When I added an option JSON_UNESCAPED_UNICODE to the function everything started to work just fine.

Thank you for your intention to help me!

This is my list.php file:

$sql = "SELECT * FROM students";
//echo $sql;
$stmt = $conn->query($sql);

$cr=0;
$students = Array();
while($row = $stmt->fetch()) {
//    echo $row['sid'];
    $students[$cr]['sid'] = $row['sid'];
    $students[$cr]['fName'] = $row['fName'];
    $students[$cr]['lName'] = $row['lName'];
    $students[$cr]['email'] = $row['email'];
    $cr++;
}

echo json_encode($students, JSON_UNESCAPED_UNICODE);