时间戳

首页 > 解决方案 > React js CRUD - 添加数据时如何自动更新表而不刷新

reactjs - React js CRUD - 添加数据时如何自动更新表而不刷新

问题描述

我正在为我的 react js 应用程序创建 CRUD，基本上发生的情况是当我添加或发布将添加的数据但表格不会更新或显示添加的最新数据，除非您刷新页面。

这是我显示数据的代码

componentDidMount() {
        axios.get('http://mylink')
        .then(response => {
            this.setState({students: response.data})
        })
        .catch(error => {
            console.log('No data to be shown')
        })
    }

并用于添加数据

handleAddData = () => {
axios({
          url: 'http://mylink',
          method: 'post',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          data: {
            students: students
          }
        })

我想要发生的是当添加数据时，表将自动更新而不刷新。

标签： reactjs

解决方案

帖子通常使用一个新元素，并且在确认后更新该州的学生：

axios({
    url: 'http://mylink',
    method: 'post',
    headers: {
     'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    data: newStudent // must receive this

 })
.then( response => {
    const { students } = this.state;
    this.setState({students: [newStudent, ...students});
})

请注意，如果您希望从后端收到新学生的更新版本，您应该将响应添加到列表中：

.then( response => {
    const { students } = this.state;
    const confirmation = response.data;
    this.setState({students: [confirmation, ...students});
})

推荐阅读