如何使rest api在react js中显示数据

Question

请帮我在php中制作简单的rest api来从数据库中获取数据并显示到react js中

我有 3 列名称、部门和标记。 这是我的 php 代码 -

<?php 

header("Content-Type: application/json; charset=UTF-8");
$con = mysqli_connect("mysql1004.mochahost.com","a310387_task_for","task_force","a310387_task_force");

    $query=mysqli_query($con,'select * from student');
$json_array=array();
while($rows=mysqli_fetch_assoc($query)){
    $json_array[]=$rows;
 }
 echo json_encode($json_array);

 ?>

这是我的反应代码 -

 componentDidMount(){
    fetch('http://veomit.com/test/zend/api/fetch.php')
    .then(response => {
                return response.json();
            })
    .then(result => {
                this.setState({
                    UserData:result
                });
    });
  }

显示喜欢-

 <tbody>
            <tr>
              {
                        this.state.UserData.map(function(item, key) {             
                        return (
                                <tr key = {key}>
                                  <td>{item.name}</td>
                                  <td>{item.department}</td>
                                  <td>{item.marks}</td>
                                </tr>
                            )
                        })
                    }
            </tr>
          </tbody>

请帮我纠正这个问题。 提前致谢。

Answer 1

工作code

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = {
    userData: []
  };
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/posts") // could be any rest get url
      .then(response => response.json())
      .then(result =>
        this.setState({
          userData: result
        })
      );
  }
  render() {
    return (
      <div className="App">
        <table>
          <tbody>
            {this.state.userData.map((data, key) => {
              return (
                <tr key={key}>
                  <td>{data.userId}</td> // column data received
                  <td>{data.title}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}

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

希望对你有帮助！！！