React：如何在API POST之后重新渲染组件以显示新数据？

Question

我是React的新手，从事学习项目。我已经用MongoDB建立了一个快速后端。

我有三个组成部分：

1. 父组件->导入两个子组件，并将“更新”功能作为道具传递给视图组件
2. 子组件一（视图）->使用async（ComponentDidUpdate）向我的后端发出.get请求以获取数据并将其显示在表中
3. 第二子组件（创建）->具有保存按钮的表单。当保存是 单击它会在我的后端创建一个.post并将值存储在mongo中

创建新任务后，我很难解决如何“刷新”或“重新渲染”我的视图组件。我只能通过手动重新加载页面来查看新创建的任务。

我的代码的简化版本（我的源代码因为尝试了许多不同的事情而变得一团糟）。

父组件

import React from 'react';
import ReactDOM from 'react-dom';
import ViewTasks from '../ViewTasks/ViewTasks';
import CreateTask from '../CreateTask/CreateTask';

class Dashboard extends React.Component {
  state = {
    data: []
  }
  
  async componentDidMount() {
    await this.getTasks();
  }
  
  
  getData = async() => {
    try {
      const res = await axios.get("/tasks");
      const data = res.data.data;
      const tasks = data.map((task) => { // did this to use MaterialUI sortable table - works ok
        return {...task}
      }
      // Set the state
      this.setState({
        data: tasks 
      });
    } catch (err) {
      console.log(err);
    }
  }

  
  
  render() {
    return (
      <ViewTask tasks={this.state.data}/>
      <CreateTask refreshTasks={this.getData} />
    )
  }
}

ReactDOM.render(<Dashboard />, document.getElementById('root'));

查看组件（上面的仪表板的子组件）

import React from 'react';
import axios from 'axios';

class ViewData extends React.Component {

  render() {
    const tasks = this.props.tasks
    return (
      <Paper>
        <Table>
           // map through tasks and display in table
        </Table>
      </Paper>
    )
  }
}

创建组件（子元素为仪表板，同级为VIEW）

// this component is a MaterialUI Dialog

import React from 'react';
import axios from 'axios';

class createTask extends React.Component {
  state = {
    task: {
      authorName: '',
      taskName: ''
    }
  }

  handleSave = async (e) => {
    e.preventDefault();
    try {
      await axios.post('/task', {
        authorName: this.state.task.authorName,
        taskName: this.state.task.taskName
      })
    } catch (err) {
        console.log(err);
    }
    this.props.getData();  // invoke the getData function from Dashboard page to get a new list of tasks
  }
  
  onAuthorNameChange = (name) => ({target: {value}}) => { 
    this.setState({
      task: {
        ...this.state.task,        
        [name]: value
      }
    })
  }

  onTaskNameChange = (name) => ({target: {value}}) => {
    this.setState({
      task: {
        ...this.state.task,
        [name]: value
      }
    })
  }
  
  render() {
    return (
      
    )
  }

}

Answer 1

那呢。无法真正测试，但是等待结果并仅在结果真正进入时才做某事才是可行的方法。

try {
  const res = await axios.get("/tasks")
  .then(
  if(res.data){
  const data = res.data.data;
  const tasks = data.map((task) => { // did this to use MaterialUI sortable table - works ok
    return {...task}
  }}
  // Set the state
  this.setState({
    data: tasks 
  });
} catch (err) {
  console.log(err);

}   }