如何从reactjs中获取mysql的数据？

Question

I want to be able to fetch my data from mysql database. My list seems to be empty when I run the code. What have I been doing wrong. My core2_php.php seems to be running fine. I have a feeling the issue is in this list.js. Will appreciate any help thank you.

class List extends React.Component {
     //initialize an object's state in a class
      constructor(props) {
        super(props)
          this.state = {
            data: []
              }
      }
      //ComponentDidMount is use to Connect a React app to external applications, such as web APIs or JavaScript functions
      componentDidMount(){
        //get request
        axios.get('http://localhost/core2_php.php').then(res => 
        {
        this.setState({data: res.data});
           }); 
        
        }
  render() {
   
    return (
     
      <div className="maincontainer">
       
        <h1 className="mr-5 ml-5 mt-5">LIST</h1>
        <div className="container mb-5 mt-5 text-left">
        
        <table class="table table-hover">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              
            </tr>
          </thead>
          <tbody>
          <tbody>
        {this.state.data.map(result => {
          return (
            <tr>
              <td>{result.firstname}</td>
              <td>{result.lastname}</td>
            </tr>
          );
        })}
      </tbody>   
          </tbody>
        </table>
      </div>
      </div>   
)
};
}
export default List;

Here is my code2_php.php I am new to coding so I would like to know how i can check the php code to see if it is working.

<?php
    $servername = "localhost";
    $username   = "root";
    $password   = "";
    $dbname     = "user";
    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    } 
        $trp = mysqli_query($conn, "SELECT * from userdata");
        $rows = array();
        while($r = mysqli_fetch_assoc($trp)) {
            $rows[] = $r;
        }
        print json_encode($rows); //convert php data to json data
    ?>

Answer 1

Can you add php file where you are using json-encode or just tell how are you returning your response.

In php you should just echo json_encode(['data' => $data]); (not return) where $data - your result array from db.

Answer 2

You can use var_dump() for debuggin.

Just add your code to the function in core2_php and call var_dump(funcName()) where your funcName() - your function name. You'll see the type and what are you getting in response. After that you'll just need to open your php right in browser to see the result.

And change your fetching to this following code:

    $trp = mysqli_query($conn, "SELECT * from userdata");
    $rows = mysqli_fetch_all($trp, MYSQLI_ASSOC); //fetching data to an associative array
    echo json_encode($rows);

You will get an array as response.data ----> Array([0]: 1, ....) you can just use console.log() in JS to show your response to console of your browser.