React JS获取json数据并使用特定的选定ID在文本字段中打印

Question

这是我写的接受来自test.php

的数据的代码

  var BasicInputBox = React.createClass ({
                    render: function (){
            //getting the input field to display the details
                      return (
                       <div>
                        <tr><td>
                          <label>{this.props.label}</label></td>
                           <td><input type="text" onChange = {this.props.valChange} value = {this.props.value}/></td>
                        </tr>
                       </div>
                      );
                    }
                });
                var DataInTableFormat = React.createClass({
                    getInitialState: function() {
                      return {
                        phpData : [],//initialize the data and the id
                        id : ''
                      };
                    },
                    componentDidMount: function() {
                      var url = document.URL;  
                      var currentId = url.substring(url.lastIndexOf('?') + 4);//getting the current ID of the student to and send it to the test.php through AJAX.
                      var data = {
                      idtoUpdate: currentId
                      };
                      $.ajax({
                        type: 'POST',
                        url: 'test.php',
                        data: data
                        })//post the ID through AJAX to test.php this will works fine.
                        .done(function(data) {

                        })
                        .fail(function(jqXhr) {
                        console.log('failed to register');
                        });
//getting the data returned from the test.php
                      $.get(this.props.source, function(result) { ////storing the JSON data in result
                          var collection = JSON.parse(result); // //coverting JSON data to Javascript object
                          if (this.isMounted()) {//checking for component mount.
                            this.setState({
                              phpData: collection //collecting the all JSON data
                           });
                          }
                        }.bind(this));
                      },
                    fetchData : function(){
                      console.log("onClick fetch")
                    },
                    nameChange: function(event){
                         this.setState({name: event.target.value})
                    },
                    render : function(){ 
                      DBdata = this.state.phpData || [];
                      return(
                        <div>
                              <table>
                                {DBdata.map(function(d){
                                 return(
                                    <BasicInputBox label="Student Name :" valChange={this.nameChange} value={d.name}/>
                                    )}
                                 )}
                                    <tr><td><td><button name="fetch" value="fetch" onClick={this.fetchData}>fetch</button></td></td></tr>
                                    <tr><td><td><button name="submit" value="submit">update</button></td></td></tr>
                                 </table>
                              </div>
                          )
                      }
                   });
                  React.render(
                    <DataInTableFormat source="http://localhost/PHP-React-Demo/test.php" />,
                      document.getElementById('Table-data')
                    );

当我更改index.php的路径时（以JSON形式打印所有数据，它很好用。当test.php（返回单个学生信息，然后我收到错误