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

Question

设想

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

尝试

1. 我尝试应用forceUpdate()来更新状态，但是据我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

2. 我试过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

3. 我尝试直接调用 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(..)方法的响应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 秒的 sleep 方法，并期望在状态传递给ManyToManyDbMain.Main()方法之前自动更新状态。 相反，在代码继续之前，网站/代码会冻结 7 秒（意味着状态也不会更新）。

题

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

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

以下对 xy 问题的解决方案已被确认但不会被说服。

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

Answer 1

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

例如 -

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