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

Question

场景

使用 Express 框架修改 MongoDB，我能够将文档添加到名为 faculties 的集合中。此外，下拉框显示属性 name收集的文档数量 faculties ，当我可以在 post 方法完成后检查它时。但是，当我通过状态并检索 faculties从中收集:const { faculties } = state;然后检查属性 name集合文档数组 faculties ，它不显示数据库中的最新添加内容。 (我正在寻找新插入的名为 faculty 的 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

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

我尝试直接调用 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 })); 
    };

使用 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 的函数.

由于状态每秒自动更新:

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

我尝试添加一个 5 秒的 sleep 方法，错误地期望状态会在状态传递到 ManyToManyDbMain.Main() 之前自动更新。方法。相反，在代码继续运行之前，网站/代码会卡住 7 秒(意味着状态也不会更新)。

问题

如何在 axios.post() 之后更新状态，这样就收藏了最新的文档faculties包含在传递给 ManyToManyDbMain.Main(..) 的状态中？

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

以下 xy 问题的解决方案已得到认可，但并未被采用。

1. 我可以手动生成所有文档的所有 ID，然后将它们推送到数据库，这样我就可以在 App.js 中获得 ID。当我需要它们时。然而，在数据库中实现多对多关系的原因是因为它被设计为由许多用户(可能)使用的小型数据库，因此我想减少计算时间(应用搜索查询来查找子集 ID)以更大的数据库为代价。这也意味着我不想在网站中创建一个单独的系统来管理所有创建的 Id，并在 MongoDb 已经拥有优化的 Id 分配系统时防止重复 Id。
2. 我可以每 n 毫秒添加第二个循环，检查某个 bool 值是否指示是否添加了新教师，并从那里启动“获取 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);
  });