如何在php中提交表单后加载表数据

到目前为止，我尝试的是：

我把表格放在左边，表格数据放在右边。提交表单后，我想立即将数据加载到表中

我有

Insert

组件和

ShowAll

组件。我正在将

ShowAll

组件导入

Insert

组件，但ShowAll组件在表单提交后未加载

import Axios from 'Axios'
import ShowAll from './ShowAll';
class Insert extends React. Component{
    constructor(props){
        super(props);
        this.state = {
            name : '',
            email:'',
            city:'',
            country:'',
            job:'',
            output:''
        }
    }
    handleInput = (e) => {
        this.setState({
            [e.target.name] : e.target.value
        })
    }
    handleSubmit=(e)=>{
        e.preventDefault();
        if(this.state.name !== '' && this.state.email !== '' && this.state.city !== '' && this.state.job !== '' && this.state.country !== ''){

            axios.post('http://localhost/facebook/test.php',this.state)
            .then(res=>{
                this.setState({
                    output:res.data.success
                })
                this.setState({
                    name :'',email:'',city:'',country:'',job:''
                })
                // this.props.history.push("/");
            })
            .catch(err=>{
                console.log(err)
            })
        }else{
            //const errors = <span style="color:red">All fields are required</span>
            alert('All fields are required')
        }
    }
    render(){
        const {output} = this.state;
        return(
            <div>
                <h1>Insert Form {output}</h1>
                <form>
                    Name : <input name='name' value={this.state.name} onChange={(event)=>this.handleInput(event)} /><br/>
                    Email : <input name='email' value={this.state.email} onChange={(event)=>this.handleInput(event)} /><br/>
                    City : <input name='city' value={this.state.city} onChange={(event)=>this.handleInput(event)} /><br/>
                    Country : <input name='country' value={this.state.country} onChange={(event)=>this.handleInput(event)} /><br/>
                    Job : <input name='job' value={this.state.job} onChange={(event)=>this.handleInput(event)} /><br/>
                    <input type='button' value="Submit" name='submit' onClick={(e)=>this.handleSubmit(e)}/>
                </form>
                <ShowAll/>
            </div>
        )        
    }
}
export default Insert;```

** This is my ShowAll component**

import React from 'react'
import axios from 'axios'
import { Link } from 'react-router-dom';
class ShowAll extends React.Component{
    constructor(){
        super();
        this.state = {
            contacts : [],
            lists : ''
        }
    }
    componentDidMount(){
        axios.get('http://localhost/facebook/contacts.php')
        .then(res =>{
            this.setState({
                contacts : res.data.data
            })
        })
        .catch(err => {

        })
    }
    render(){
        if(this.state.contacts.length > 0){
            this.state.lists = this.state.contacts.map(contact => (
                <tr key={contact.id}>
                    <td>{contact.name}</td>
                    <td>{contact.email}</td>
                    <td>{contact.city}</td>
                    <td>{contact.country}</td>
                    <td>{contact.job}</td>
                    <td> <Link to={'/edit/'+contact.id}>Edit</Link> </td>
                    <td> <Link to={'/delete/'+contact.id}>Delete</Link> </td>
                </tr>
                ));
        }else{
            this.state.lists = <tr><td>No Records found</td></tr>
        }

        return(
            <>
                <table className="table table-striped">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>City</th>
                        <th>Country</th>
                        <th>Job</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                        {this.state.lists} 
                    </tbody>
                </table>
            </>
        )
    }
}
export default ShowAll```

从“Axios”导入Axios
从“/ShowAll”导入ShowAll；
类插入扩展了React。组成部分{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
电子邮件：“”，
城市：''，
国家：“，
作业：“”，
输出：“”
}
}
handleInput=（e）=>{
这是我的国家({
[e.target.name]：e.target.value
})
}
handleSubmit=（e）=>{
e、 预防默认值（）；
如果（this.state.name！=''&&this.state.email！=''&&this.state.city！=''&&this.state.job！=''&&this.state.country！=''）{
轴心柱http://localhost/facebook/test.php",本州)
。然后（res=>{
这是我的国家({
输出：res.data.success
})
这是我的国家({
名称：“”，电子邮件：“”，城市：“”，国家：“”，作业：“”
})
//this.props.history.push（“/”）；
})
.catch（错误=>{
console.log（错误）
})
}否则{
//const errors=所有字段都是必需的
警报（'所有字段都是必填项'）
}
}
render（）{
const{output}=this.state；
返回(
插入表单{output}
名称：this.handleInput（事件）}/>

电子邮件：this.handleInput（event）}/>

城市：这个.handleInput（事件）}/>

国家：this.handleInput（event）}/>

作业：this.handleInput（事件）}/>

this.handleSubmit（e）}/>
)        
}
}
导出默认插入```
**这是我的ShowAll组件**
从“React”导入React
从“axios”导入axios
从'react router dom'导入{Link}；
类ShowAll扩展了React.Component{
构造函数（）{
超级（）；
此.state={
联系人：[]，
列表：“”
}
}
componentDidMount（）{
axios.get（）http://localhost/facebook/contacts.php')
。然后（res=>{
这是我的国家({
联系人：res.data.data
})
})
.catch（错误=>{
})
}
render（）{
如果（this.state.contacts.length>0）{
this.state.lists=this.state.contacts.map（contact=>(
{contact.name}
{contact.email}
{联系城市}
{contact.country}
{contact.job}
编辑
删除
));
}否则{
this.state.lists=未找到任何记录
}
返回(
名称
电子邮件
城市
国家
工作
行动
{this.state.lists}
)
}
}
导出默认ShowAll```

想法是在成功插入时，在

插入组件中保存时间戳（即
记录生成时间
）。此
recordGenerationTime
将传递给
ShowAll
组件，以便从
componentdiddupdate
ShowAll
将以前的时间戳与当前时间戳进行比较，并决定是否必须进行API调用

更新的组件代码如下所示：

插入组件：


从“Axios”导入Axios
从“/ShowAll”导入ShowAll；
类插入扩展了React。组成部分{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
电子邮件：“”，
城市：''，
国家：“，
作业：“”，
输出：“”，
recordGenerationTime:“”，
}
}
handleInput=（e）=>{
这是我的国家({
[e.target.name]：e.target.value
})
}
handleSubmit=（e）=>{
e、 预防默认值（）；
如果（this.state.name！=''&&this.state.email！=''&&this.state.city！=''&&this.state.job！=''&&this.state.country！=''）{
轴心柱http://localhost/facebook/test.php",本州)
。然后（res=>{
这是我的国家({
输出：res.data.success，
recordGenerationTime:new Date（）.getTime（）
})
这是我的国家({
名称：“”，电子邮件：“”，城市：“”，国家：“”，作业：“”
})
//this.props.history.push（“/”）；
})
.catch（错误=>{
console.log（错误）
})
}否则{
//const errors=所有字段都是必需的
警报（'所有字段都是必填项'）
}
}
render（）{
const{output}=this.state；
返回(
插入表单{output}
名称：this.handleInput（事件）}/>

电子邮件：this.handleInput（event）}/>

城市：这个.handleInput（事件）}/>

国家：this.handleInput（event）}/>

作业：此。handleInput（事件