Php 如何使restapi在react js中显示数据

请帮助我用php制作简单的RESTAPI，从数据库中获取数据并显示到react js中

我有三栏：姓名、部门和分数。 这是我的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);

 ?>

像-

 <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>

{
this.state.UserData.map（函数（项，键）{
返回(
{item.name}
{项目.部门}
{item.marks}
)
})
}

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

正在工作

从“React”导入React；
从“react dom”导入react dom；
类应用程序扩展了React.Component{
状态={
用户数据：[]
};
componentDidMount（）{
取回（“https://jsonplaceholder.typicode.com/posts“”//可以是任何rest获取url
.then（response=>response.json（））
。然后（结果=>
这是我的国家({
用户数据：结果
})
);
}
render（）{
返回(
{this.state.userData.map（（数据，键）=>{
返回(
{data.userId}//接收到列数据
{data.title}
);
})}
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

---

希望有帮助

我的react代码运行良好，但我认为我的RESTAPI是错误的。。。所以请帮我纠正我的api

 <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>

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);