PHP、MySQL、React、Rest API 教程混淆 Part 2

Question

仍然遵循以下教程：

https://www.techiediaries.com/php-react-rest-api-crud-tutorial/

我终于在控制台中没有错误。但是我在控制台中得到的只是一个空白数组，它只是读取 [ ]

完整代码如下：

<script type="text/babel">
  class App extends React.Component {
  componentDidMount() {
    const url = 'api/testQuery.php'
    axios.get(url).then(response => response.data)
    .then((data) => {
     this.setState({ users: data })
     console.log(this.info.users)
   })
  }
  info = {
   users: []
  } 
  render() {
   return (
    <React.Fragment>
    <h1>All Users</h1>
    <table border='1' width='100%'>
    <tr>
      <th>Username</th>
      <th>Fullname</th>
      <th>Email</th>
    </tr>

    {this.info.users.map((user) => (
      <tr>
        <td>{ user.username }</td>
        <td>{ user.fullname }</td>
        <td>{ user.email }</td>
      </tr>
    ))}
    </table>
    </React.Fragment>
   );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
</script>

从 testQuery.php 脚本返回的 json 如下所示：

[
  {
    "uid":"7",
    "username":"tna.mjordan",
    "fullname":"Michael Jordan",
    "email":"tna.mjordan@tna.com",
    "userlevel":"9",
    "division":"Chicago"
  }, 
  // and so on
]

关于为什么我得到一个空白用户数组以及如何解决它的任何想法？

Answer 1

我认为您需要从状态打印信息，而不是属性本身。在返回的渲染 HTML 中也会发生同样的情况。此外，setState 应该修改info 属性，而不是其中的users 属性。您可以在下面找到应用了更改的代码：

class App extends React.Component {
  componentDidMount() {
    const url = "api/testQuery.php";
    axios
      .get(url)
      .then((response) => data)
      .then((data) => {
        this.setState({ info: { users: data } });
        console.log(this.state.info.users);
      });
  }
  info = {
    users: [],
  };
  render() {
    return (
      <React.Fragment>
        <h1>All Users</h1>
        <table border="1" width="100%">
          <tr>
            <th>Username</th>
            <th>Fullname</th>
            <th>Email</th>
          </tr>

          {this.state.info.users.map((user) => (
            <tr>
              <td>{user.username}</td>
              <td>{user.fullname}</td>
              <td>{user.email}</td>
            </tr>
          ))}
        </table>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));