React:如何重新渲染组件在API发布后显示新数据

Question

我很陌生，可以为学习目的做出反应和研究。我已经用MongoDB设置了明确的后端。

我有三个组件：

1. parent组件 ->导入两个子组件并通过"更新"功能作为视图组件的支撑
2. 儿童组件一（view） ->使用async（componentDidupDate）向我的后端提出.get请求以获取数据并将其显示在表中
3. 儿童组件两个（创建） ->具有保存按钮的表单。保存时单击它使.。

我很难弄清楚如何"刷新"或"重新渲染"我的 view 组件创建了新任务。我只能通过手动重新加载页面来查看新创建的任务。

我的代码的愚蠢版本（我的来源是尝试了许多不同的事情）。

父级

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>
    )
  }
}

创建组件（儿童到仪表板，兄弟姐妹要查看）

// 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);

} }