如何在reactJS中以编辑形式显示数据

我是新来的。我正在PHPAPI的帮助下创建简单的CRUD操作。插入、删除和更新工作正常但当我单击编辑按钮时，相关数据不会显示在字段中。

App.js是：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Insert from './components/Insert';
import View from './components/View';
import Edit from './components/Edit';

function App() {
return (
<Router>
  <div className="container">
  <nav>
    <div>
      <h4>React CRUD</h4>
      <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/insert">Insert</Link>
        </li>
        <li>
          <Link to="/view">View</Link>
        </li>
      </ul>
      </div>
    </div>
    </nav>

    <Switch>
      <Route exact path="/insert" component={Insert} />
      <Route path="/edit/:id" component={Edit} />
      <Route path="/view" component={View} />
    </Switch>
  </div>
</Router>
);
}
export default App;

import React from 'react';
import axios from 'axios';
import RecordList from './RecordList';

export default class View extends React.Component{
constructor(props){
super(props);
this.state = {
  userslist: []
};
}
componentDidMount(){
axios.get('http://localhost/react_crud2_api/view.php')
.then(response => {
  this.setState({
    userslist: response.data
  });
})
.catch(function(error){
  console.log(error);
})
}
usersList(){
return this.state.userslist.map(function(val,key){
  return <RecordList obj={val} key={key} />
});
}
render(){
return(
  <div>
    <h3>Users List</h3>
    <table>
    <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th colSpan="2">Action</th>
    </tr>
    </thead>
    <tbody>{this.usersList()}</tbody>
    </table>
  </div>
 )
}

import React from 'react';
import axios from 'axios';
import { Redirect } from 'react-router';
import { Link } from 'react-router-dom';
export default class RecordList extends React.Component{
constructor(props){
super(props);
this.deletesss = this.deletesss.bind(this);
this.state = {
  redirect: false
}
}

deletesss(){
axios.get('http://localhost/react_crud2_api/delete.php?id='+this.props.obj.id)
.then(this.setState({redirect: true}))
.catch(err => console.log(err))
}
render(){
const { redirect } = this.state;
if (redirect) {
  return <Redirect to='/view' />;
}
return(
  <tr>
    <td>{this.props.obj.first_name}</td>
    <td>{this.props.obj.last_name}</td>
    <td>{this.props.obj.email}</td>
    <td><Link to={'/edit/'+this.props.obj.id}>Edit</Link></td>
    <td><button onClick={this.deletesss}>Delete</button></td>
  </tr>

)
}
}

import React from 'react';
import axios from 'axios';
import { Redirect } from 'react-router';

export default class Edit extends React.Component{

constructor(props){
super(props);
this.state = {
  first_name: '',
  last_name: '',
  email: '',
  redirect: false
}
this.onChangeFirstName = this.onChangeFirstName.bind(this);
this.onChangeLastName = this.onChangeLastName.bind(this);
this.onChangeEmail = this.onChangeEmail.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}

componentDidMount(){
axios.get('http://localhost/react_crud2_api/edit.php?id='+this.props.match.params.id)
.then(response => {
  this.setState({
    first_name: response.data.first_name,
    last_name: response.data.last_name,
    email: response.data.email
  });
})
.catch(function(error){
  console.log(error);
})
}

onChangeFirstName(e){
this.setState({
  first_name: e.target.value
})
}
onChangeLastName(e){
this.setState({
  last_name: e.target.value
})
}
onChangeEmail(e){
this.setState({
  email: e.target.value
})
}
onSubmit(e){
e.preventDefault();
const obj = {
  first_name: this.state.first_name,
  last_name: this.state.last_name,
  email: this.state.email
};
//console.log(obj)
axios.post('http://localhost/react_crud2_api/update.php?id='+this.props.match.params.id, obj)
.then(this.setState({redirect: true}));
//this.props.history.push('/view');
}

render(){
// const { redirect } = this.state;
// if (redirect) {
//   return <Redirect to='/view' />;
// }
return(
  <div style={{ marginTop: 10 }}>
  <h3>Add New User</h3>
  <form onSubmit={this.onSubmit}>
    <div>
      <label>First Name</label>
      <input type="text" defaultValue={this.state.first_name} onChange={this.onChangeFirstName}  />
    </div>
    <div>
      <label>Last Name</label>
      <input type="text" defaultValue={this.state.last_name} onChange={this.onChangeLastName} />
    </div>
    <div>
      <label>Email</label>
      <input type="text" defaultValue={this.state.email} onChange={this.onChangeEmail} />
    </div>
    <div>
      <input type="submit" value="Update User" />
    </div>

  </form>
  </div>
)
}
}

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从“./components/Insert”导入Insert；
从“./components/View”导入视图；
从“./components/Edit”导入编辑；
函数App（）{
返回(
反应积垢


家


插入


看法


);
}
导出默认应用程序；

View.js是：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Insert from './components/Insert';
import View from './components/View';
import Edit from './components/Edit';

function App() {
return (
<Router>
  <div className="container">
  <nav>
    <div>
      <h4>React CRUD</h4>
      <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/insert">Insert</Link>
        </li>
        <li>
          <Link to="/view">View</Link>
        </li>
      </ul>
      </div>
    </div>
    </nav>

    <Switch>
      <Route exact path="/insert" component={Insert} />
      <Route path="/edit/:id" component={Edit} />
      <Route path="/view" component={View} />
    </Switch>
  </div>
</Router>
);
}
export default App;

import React from 'react';
import axios from 'axios';
import RecordList from './RecordList';

export default class View extends React.Component{
constructor(props){
super(props);
this.state = {
  userslist: []
};
}
componentDidMount(){
axios.get('http://localhost/react_crud2_api/view.php')
.then(response => {
  this.setState({
    userslist: response.data
  });
})
.catch(function(error){
  console.log(error);
})
}
usersList(){
return this.state.userslist.map(function(val,key){
  return <RecordList obj={val} key={key} />
});
}
render(){
return(
  <div>
    <h3>Users List</h3>
    <table>
    <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th colSpan="2">Action</th>
    </tr>
    </thead>
    <tbody>{this.usersList()}</tbody>
    </table>
  </div>
 )
}

import React from 'react';
import axios from 'axios';
import { Redirect } from 'react-router';
import { Link } from 'react-router-dom';
export default class RecordList extends React.Component{
constructor(props){
super(props);
this.deletesss = this.deletesss.bind(this);
this.state = {
  redirect: false
}
}

deletesss(){
axios.get('http://localhost/react_crud2_api/delete.php?id='+this.props.obj.id)
.then(this.setState({redirect: true}))
.catch(err => console.log(err))
}
render(){
const { redirect } = this.state;
if (redirect) {
  return <Redirect to='/view' />;
}
return(
  <tr>
    <td>{this.props.obj.first_name}</td>
    <td>{this.props.obj.last_name}</td>
    <td>{this.props.obj.email}</td>
    <td><Link to={'/edit/'+this.props.obj.id}>Edit</Link></td>
    <td><button onClick={this.deletesss}>Delete</button></td>
  </tr>

)
}
}

import React from 'react';
import axios from 'axios';
import { Redirect } from 'react-router';

export default class Edit extends React.Component{

constructor(props){
super(props);
this.state = {
  first_name: '',
  last_name: '',
  email: '',
  redirect: false
}
this.onChangeFirstName = this.onChangeFirstName.bind(this);
this.onChangeLastName = this.onChangeLastName.bind(this);
this.onChangeEmail = this.onChangeEmail.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}

componentDidMount(){
axios.get('http://localhost/react_crud2_api/edit.php?id='+this.props.match.params.id)
.then(response => {
  this.setState({
    first_name: response.data.first_name,
    last_name: response.data.last_name,
    email: response.data.email
  });
})
.catch(function(error){
  console.log(error);
})
}

onChangeFirstName(e){
this.setState({
  first_name: e.target.value
})
}
onChangeLastName(e){
this.setState({
  last_name: e.target.value
})
}
onChangeEmail(e){
this.setState({
  email: e.target.value
})
}
onSubmit(e){
e.preventDefault();
const obj = {
  first_name: this.state.first_name,
  last_name: this.state.last_name,
  email: this.state.email
};
//console.log(obj)
axios.post('http://localhost/react_crud2_api/update.php?id='+this.props.match.params.id, obj)
.then(this.setState({redirect: true}));
//this.props.history.push('/view');
}

render(){
// const { redirect } = this.state;
// if (redirect) {
//   return <Redirect to='/view' />;
// }
return(
  <div style={{ marginTop: 10 }}>
  <h3>Add New User</h3>
  <form onSubmit={this.onSubmit}>
    <div>
      <label>First Name</label>
      <input type="text" defaultValue={this.state.first_name} onChange={this.onChangeFirstName}  />
    </div>
    <div>
      <label>Last Name</label>
      <input type="text" defaultValue={this.state.last_name} onChange={this.onChangeLastName} />
    </div>
    <div>
      <label>Email</label>
      <input type="text" defaultValue={this.state.email} onChange={this.onChangeEmail} />
    </div>
    <div>
      <input type="submit" value="Update User" />
    </div>

  </form>
  </div>
)
}
}

从“React”导入React；
从“axios”导入axios；
从“./RecordList”导入记录列表；
导出默认类视图扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户列表：[]
};
}
componentDidMount（）{
axios.get（）http://localhost/react_crud2_api/view.php')
。然后（响应=>{
这是我的国家({
userslist:response.data
});
})
.catch（函数（错误）{
console.log（错误）；
})
}
用户列表（）{
返回this.state.userslist.map（函数（val，key）{
返回
});
}
render（）{
返回(
用户列表
名字
姓
电子邮件
行动
{this.usersList（）}
)
}

}

记录列表为：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Insert from './components/Insert';
import View from './components/View';
import Edit from './components/Edit';

function App() {
return (
<Router>
  <div className="container">
  <nav>
    <div>
      <h4>React CRUD</h4>
      <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/insert">Insert</Link>
        </li>
        <li>
          <Link to="/view">View</Link>
        </li>
      </ul>
      </div>
    </div>
    </nav>

    <Switch>
      <Route exact path="/insert" component={Insert} />
      <Route path="/edit/:id" component={Edit} />
      <Route path="/view" component={View} />
    </Switch>
  </div>
</Router>
);
}
export default App;

import React from 'react';
import axios from 'axios';
import RecordList from './RecordList';

export default class View extends React.Component{
constructor(props){
super(props);
this.state = {
  userslist: []
};
}
componentDidMount(){
axios.get('http://localhost/react_crud2_api/view.php')
.then(response => {
  this.setState({
    userslist: response.data
  });
})
.catch(function(error){
  console.log(error);
})
}
usersList(){
return this.state.userslist.map(function(val,key){
  return <RecordList obj={val} key={key} />
});
}
render(){
return(
  <div>
    <h3>Users List</h3>
    <table>
    <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th colSpan="2">Action</th>
    </tr>
    </thead>
    <tbody>{this.usersList()}</tbody>
    </table>
  </div>
 )
}

import React from 'react';
import axios from 'axios';
import { Redirect } from 'react-router';
import { Link } from 'react-router-dom';
export default class RecordList extends React.Component{
constructor(props){
super(props);
this.deletesss = this.deletesss.bind(this);
this.state = {
  redirect: false
}
}

deletesss(){
axios.get('http://localhost/react_crud2_api/delete.php?id='+this.props.obj.id)
.then(this.setState({redirect: true}))
.catch(err => console.log(err))
}
render(){
const { redirect } = this.state;
if (redirect) {
  return <Redirect to='/view' />;
}
return(
  <tr>
    <td>{this.props.obj.first_name}</td>
    <td>{this.props.obj.last_name}</td>
    <td>{this.props.obj.email}</td>
    <td><Link to={'/edit/'+this.props.obj.id}>Edit</Link></td>
    <td><button onClick={this.deletesss}>Delete</button></td>
  </tr>

)
}
}

import React from 'react';
import axios from 'axios';
import { Redirect } from 'react-router';

export default class Edit extends React.Component{

constructor(props){
super(props);
this.state = {
  first_name: '',
  last_name: '',
  email: '',
  redirect: false
}
this.onChangeFirstName = this.onChangeFirstName.bind(this);
this.onChangeLastName = this.onChangeLastName.bind(this);
this.onChangeEmail = this.onChangeEmail.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}

componentDidMount(){
axios.get('http://localhost/react_crud2_api/edit.php?id='+this.props.match.params.id)
.then(response => {
  this.setState({
    first_name: response.data.first_name,
    last_name: response.data.last_name,
    email: response.data.email
  });
})
.catch(function(error){
  console.log(error);
})
}

onChangeFirstName(e){
this.setState({
  first_name: e.target.value
})
}
onChangeLastName(e){
this.setState({
  last_name: e.target.value
})
}
onChangeEmail(e){
this.setState({
  email: e.target.value
})
}
onSubmit(e){
e.preventDefault();
const obj = {
  first_name: this.state.first_name,
  last_name: this.state.last_name,
  email: this.state.email
};
//console.log(obj)
axios.post('http://localhost/react_crud2_api/update.php?id='+this.props.match.params.id, obj)
.then(this.setState({redirect: true}));
//this.props.history.push('/view');
}

render(){
// const { redirect } = this.state;
// if (redirect) {
//   return <Redirect to='/view' />;
// }
return(
  <div style={{ marginTop: 10 }}>
  <h3>Add New User</h3>
  <form onSubmit={this.onSubmit}>
    <div>
      <label>First Name</label>
      <input type="text" defaultValue={this.state.first_name} onChange={this.onChangeFirstName}  />
    </div>
    <div>
      <label>Last Name</label>
      <input type="text" defaultValue={this.state.last_name} onChange={this.onChangeLastName} />
    </div>
    <div>
      <label>Email</label>
      <input type="text" defaultValue={this.state.email} onChange={this.onChangeEmail} />
    </div>
    <div>
      <input type="submit" value="Update User" />
    </div>

  </form>
  </div>
)
}
}

从“React”导入React；
从“axios”导入axios；
从“react router”导入{Redirect}；
从'react router dom'导入{Link}；
导出默认类记录列表扩展React.Component{
建造师（道具）{
超级（道具）；
this.deletesss=this.deletesss.bind（this）；
此.state={
重定向：false
}
}
deletesss（）{
axios.get（）http://localhost/react_crud2_api/delete.php?id=“+this.props.obj.id）
.then（this.setState（{redirect:true}））
.catch（err=>console.log（err））
}
render（）{
const{redirect}=this.state；
如果（重定向）{
返回；
}
返回(
{this.props.obj.first_name}
{this.props.obj.last_name}
{this.props.obj.email}
编辑
删除
)
}
}

Edit.js:

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Insert from './components/Insert';
import View from './components/View';
import Edit from './components/Edit';

function App() {
return (
<Router>
  <div className="container">
  <nav>
    <div>
      <h4>React CRUD</h4>
      <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/insert">Insert</Link>
        </li>
        <li>
          <Link to="/view">View</Link>
        </li>
      </ul>
      </div>
    </div>
    </nav>

    <Switch>
      <Route exact path="/insert" component={Insert} />
      <Route path="/edit/:id" component={Edit} />
      <Route path="/view" component={View} />
    </Switch>
  </div>
</Router>
);
}
export default App;

import React from 'react';
import axios from 'axios';
import RecordList from './RecordList';

export default class View extends React.Component{
constructor(props){
super(props);
this.state = {
  userslist: []
};
}
componentDidMount(){
axios.get('http://localhost/react_crud2_api/view.php')
.then(response => {
  this.setState({
    userslist: response.data
  });
})
.catch(function(error){
  console.log(error);
})
}
usersList(){
return this.state.userslist.map(function(val,key){
  return <RecordList obj={val} key={key} />
});
}
render(){
return(
  <div>
    <h3>Users List</h3>
    <table>
    <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th colSpan="2">Action</th>
    </tr>
    </thead>
    <tbody>{this.usersList()}</tbody>
    </table>
  </div>
 )
}

import React from 'react';
import axios from 'axios';
import { Redirect } from 'react-router';
import { Link } from 'react-router-dom';
export default class RecordList extends React.Component{
constructor(props){
super(props);
this.deletesss = this.deletesss.bind(this);
this.state = {
  redirect: false
}
}

deletesss(){
axios.get('http://localhost/react_crud2_api/delete.php?id='+this.props.obj.id)
.then(this.setState({redirect: true}))
.catch(err => console.log(err))
}
render(){
const { redirect } = this.state;
if (redirect) {
  return <Redirect to='/view' />;
}
return(
  <tr>
    <td>{this.props.obj.first_name}</td>
    <td>{this.props.obj.last_name}</td>
    <td>{this.props.obj.email}</td>
    <td><Link to={'/edit/'+this.props.obj.id}>Edit</Link></td>
    <td><button onClick={this.deletesss}>Delete</button></td>
  </tr>

)
}
}

import React from 'react';
import axios from 'axios';
import { Redirect } from 'react-router';

export default class Edit extends React.Component{

constructor(props){
super(props);
this.state = {
  first_name: '',
  last_name: '',
  email: '',
  redirect: false
}
this.onChangeFirstName = this.onChangeFirstName.bind(this);
this.onChangeLastName = this.onChangeLastName.bind(this);
this.onChangeEmail = this.onChangeEmail.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}

componentDidMount(){
axios.get('http://localhost/react_crud2_api/edit.php?id='+this.props.match.params.id)
.then(response => {
  this.setState({
    first_name: response.data.first_name,
    last_name: response.data.last_name,
    email: response.data.email
  });
})
.catch(function(error){
  console.log(error);
})
}

onChangeFirstName(e){
this.setState({
  first_name: e.target.value
})
}
onChangeLastName(e){
this.setState({
  last_name: e.target.value
})
}
onChangeEmail(e){
this.setState({
  email: e.target.value
})
}
onSubmit(e){
e.preventDefault();
const obj = {
  first_name: this.state.first_name,
  last_name: this.state.last_name,
  email: this.state.email
};
//console.log(obj)
axios.post('http://localhost/react_crud2_api/update.php?id='+this.props.match.params.id, obj)
.then(this.setState({redirect: true}));
//this.props.history.push('/view');
}

render(){
// const { redirect } = this.state;
// if (redirect) {
//   return <Redirect to='/view' />;
// }
return(
  <div style={{ marginTop: 10 }}>
  <h3>Add New User</h3>
  <form onSubmit={this.onSubmit}>
    <div>
      <label>First Name</label>
      <input type="text" defaultValue={this.state.first_name} onChange={this.onChangeFirstName}  />
    </div>
    <div>
      <label>Last Name</label>
      <input type="text" defaultValue={this.state.last_name} onChange={this.onChangeLastName} />
    </div>
    <div>
      <label>Email</label>
      <input type="text" defaultValue={this.state.email} onChange={this.onChangeEmail} />
    </div>
    <div>
      <input type="submit" value="Update User" />
    </div>

  </form>
  </div>
)
}
}

从“React”导入React；
从“axios”导入axios；
从“react router”导入{Redirect}；
导出默认类编辑扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
名字：''，
姓氏：“”，
电子邮件：“”，
重定向：false
}
this.onChangeFirstName=this.onChangeFirstName.bind（this）；
this.onChangeLastName=this.onChangeLastName.bind（this）；
this.onchangemail=this.onchangemail.bind（this）；
this.onSubmit=this.onSubmit.bind（this）；
}
componentDidMount（）{
axios.get（）http://localhost/react_crud2_api/edit.php?id=“+this.props.match.params.id）
。然后（响应=>{
这是我的国家({
first_name:response.data.first_name，
姓氏：response.data.last_name，
电子邮件：response.data.email
});
})
.catch（函数（错误）{
console.log（错误）；
})
}
onChangeFirstName（e）{
这是我的国家({
名字：e.target.value
})
}
onChangeLastName（e）{
这是我的国家({
姓氏：e.target.value
})
}
OnChange电子邮件（e）{
这是我的国家({
电子邮件：e.target.value
})
}
提交（e）{
e、 预防默认值（）；
常量对象={
名字：this.state.first_name，
姓氏：this.state.last_name，
电子邮件：this.state.email
};
//控制台日志（obj）
轴心柱http://localhost/react_crud2_api/update.php?id=“+this.props.match.params.id，obj）
.then（this.setState（{redirect:true}））；
//this.props.history.push（'/view'）；
}
render（）{
//const{redirect}=this.state；
//如果（重定向）{
//返回；
// }
返回(
添加新用户
名字
姓
电子邮件
)
}
}

点击编辑按钮后。显示空白表单，但当我填写一些数据时，它会更新数据。为什么数据没有显示在编辑页面上。

从“React”导入React；
import React from 'react';
import axios from 'axios';
import { Redirect } from 'react-router';

export default class Edit extends React.Component{

constructor(props){
super(props);
this.state = {
  first_name: '',
  last_name: '',
  email: '',
  redirect: false
}
this.onChangeFirstName = this.onChangeFirstName.bind(this);
this.onChangeLastName = this.onChangeLastName.bind(this);
this.onChangeEmail = this.onChangeEmail.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}

componentDidMount(){
axios.get('http://localhost/react_crud2_api/edit.php?id='+this.props.match.params.id)
.then(response => {
  this.setState({
    first_name: response.data.first_name,
    last_name: response.data.last_name,
    email: response.data.email
  });
})
.catch(function(error){
  console.log(error);
})
}

onChangeFirstName(e){
this.setState({
  first_name: e.target.value
})
}
onChangeLastName(e){
this.setState({
  last_name: e.target.value
})
}
onChangeEmail(e){
this.setState({
  email: e.target.value
})
}
onSubmit(e){
e.preventDefault();
const obj = {
  first_name: this.state.first_name,
  last_name: this.state.last_name,
  email: this.state.email
};
//console.log(obj)
axios.post('http://localhost/react_crud2_api/update.php?id='+this.props.match.params.id, obj)
.then(this.setState({redirect: true}));
//this.props.history.push('/view');
}

render(){
// const { redirect } = this.state;
// if (redirect) {
//   return <Redirect to='/view' />;
// }
return(
  <div style={{ marginTop: 10 }}>
  <h3>Add New User</h3>
  <form onSubmit={this.onSubmit}>
    <div>
      <label>First Name</label>
      <input type="text" value={this.state.first_name} onChange={this.onChangeFirstName}  />
    </div>
    <div>
      <label>Last Name</label>
      <input type="text" value={this.state.last_name} onChange={this.onChangeLastName} />
    </div>
    <div>
      <label>Email</label>
      <input type="text" value={this.state.email} onChange={this.onChangeEmail} />
    </div>
    <div>
      <input type="submit" value="Update User" />
    </div>

  </form>
  </div>
)
}
}

从“axios”导入axios；
从“react router”导入{Redirect}；
导出默认类编辑扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
名字：''，
姓氏：“”，
电子邮件：“”，
重定向：false
}
this.onChangeFirstName=this.onChangeFirstName.bind（this）；
this.onChangeLastName=this.onChangeLastName.bind（this）；
this.onchangemail=this.onchangemail.bind（this）；
this.onSubmit=this.onSubmit.bind（this）；
}
componentDidMount（）{
axios.get（）http://localhost/react_crud2_api/edit.php?id=“+this.props.match.params.id）
。然后（响应=>{
这是我的国家({
first_name:response.data.first_name，
姓氏：response.data.last_name，
电子邮件：response.data.email
});
})
.catch（函数（错误）{
console.log（错误）；
})
}
onChangeFirstName（e）{
这是我的国家({
名字：e.target.value
})
}
onChangeLastName（e）{
这是我的国家({
姓氏：e.target.value
})
}
OnChange电子邮件（e）{
这是我的国家({
电子邮件：e.target.value
})
}
提交（e）{
e、 预防默认值（）；
常量对象={
名字：this.state.first_name，
姓氏：this.state.last_name，
电子邮件：this.state.email
};
//控制台日志（obj）
轴心柱http://localhost/react_crud2_api/update.php?id=“+this.props.match.params.id，obj）
.then（this.setState（{redirect:true}））；
//this.props.history.push（'/view'）；
}
render（）{
//const{redirect}=this.state；
//如果（重定向）{
//返回；
// }
返回(
添加新用户
名字
姓
电子邮件
)
}
}

确保在componentDidMount方法中有来自API的数据

从“React”导入React；
从“axios”导入axios；
从“react router”导入{Redirect}；
导出默认类编辑扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
名字：''，
姓氏：“”，
电子邮件：“”，
重定向：false
}
this.onChangeFirstName=thi