在 `axios.post()` 之后更新状态

Question

场景

使用 Express 框架修改 MongoDB 我可以将文档添加到名为 faculties 的集合中。此外，显示集合faculties 中文档的属性name 的下拉框，当我可以在post 方法完成后检查它时。但是，当我通过状态并从中检索faculties 集合时，使用：const { faculties } = state;，然后检查集合faculties 的文档数组的属性name，它没有显示最新添加到数据库。 （我正在寻找新插入的名为 exampleFaculty 的文档的属性 'id' 以实现多对多关系）。

尝试

1. 我尝试应用forceUpdate() 来更新状态，但据我了解，这会更新render 而不是状态。尽管如此，渲染已更新，但状态未更新。这是实现：

this.forceUpdate();
axios.post('http://localhost:3001/api/putFaculty', {name: message});
this.forceUpdate();
ManyToManyDbMain.Main(message,collectionName,this.state) // implement many to many relationships in db

1. 我试过this.setState(this.state);更新状态：

this.forceUpdate();
axios.post('http://localhost:3001/api/putFaculty', {name: message});
this.forceUpdate();
this.setState(this.state);
ManyToManyDbMain.Main(message,collectionName,this.state) // implement many to many relationships in db

1. 我试过直接调用fetch方法更新状态：

this.forceUpdate();
axios.post('http://localhost:3001/api/putFaculty', {name: message});
this.forceUpdate();
this.getFaculties()
this.setState(this.state);

ManyToManyDbMain.Main(message,collectionName,this.state) // implement many to many relationships in db

其中 fetch 方法包括：

// read the mongodb collection faculties in database "education"
    getFaculties= () => {
        fetch('http://localhost:3001/api/getFaculties')
                .then((data) => data.json())
                //set property "faculties" within the state" (won't throw error if you haven't defined property "faculties" within state".
                .then((res) => this.setState({ faculties: res.data })); 
    };

4. 使用axiom.post(..) 方法的响应从中读取新系：

axios.post('http://localhost:3001/api/putFaculty', {name: message})
                          .then(response => {
                            const {faculties} = this.state;
                            alert(response.data)
                            alert(response.name)
                            faculties.push(response.data);
                            this.setState({faculties});
                          })

但这返回一个object Object，我还不知道如何读取该对象的属性，我尝试将其映射到.name 属性：response.map((dat) => dat.name)，但响应没有名为map 的函数.

5. 由于状态每秒自动更新一次：

this.getFaculties();
        if (!this.state.intervalIsSet) {
            let interval = setInterval(this.getFaculties, 1000);
            this.setState({ intervalIsSet: interval });
        }

6. 我尝试添加一个 5 秒的睡眠方法，并错误地期望状态会在状态传递给 ManyToManyDbMain.Main() 方法之前自动更新。相反，在代码继续之前，网站/代码会冻结 7 秒（意味着状态也不会更新）。

问题

如何更新axios.post()之后的状态，使faculties集合的最新文档包含在传递给ManyToManyDbMain.Main(..)的状态中？

忽略的快捷方式/XY 问题解决方案：

以下 xy 问题的解决方案得到认可但未被说服。

1. 我可以手动生成所有文档的所有 ID，然后将它们推送到数据库中，这样我就可以在需要时将 ID 放在 App.js 中。但是，在数据库中实现多对多关系的原因是因为它被设计为许多用户（可能）使用的小型数据库，因此我想减少计算时间（应用搜索查询来查找子集 id）以更大的数据库为代价。这也意味着我不想在网站中创建一个单独的系统来管理所有创建的 Id 并在 MongoDb 已经具有优化的 Id 分配系统时防止双重 Id。
2. 我可以每 n 毫秒添加一个第二个循环，检查是否某个布尔值指示是否添加了新教师，并从那里启动“获取 Id 方法”。但我认为这会使代码变得不必要地复杂、难以测试、可能对多个用户不可靠以及计算密集型，我正在努力避免这种情况。

Answer 1

您可以使用axios .then() 方法来设置组件的状态。

例如——

axios.get('http://localhost:3001/api/getFaculties')
  .then(res => {
    /** Console here to get an actual response from server */
    console.log(res);
    this.setState({
      faculties: res.data.results
    });
  })
  .catch(function(error) {
    console.log(error);
  });