在`axios.post()`

时间:2019-12-30 12:49:34

标签: javascript mongodb express axios state

场景

使用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
  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

其中的提取方法包括:

// 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 })); 
    };
  1. 使用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的函数。

  1. 由于状态会每秒自动更新:
this.getFaculties();
        if (!this.state.intervalIsSet) {
            let interval = setInterval(this.getFaculties, 1000);
            this.setState({ intervalIsSet: interval });
        }
  1. 我尝试添加5秒的休眠方法,但错误地期望在将状态传递给ManyToManyDbMain.Main()方法之前将状态自动更新。相反,在代码继续之前,网站/代码会冻结7秒钟(这意味着状态也不会更新)。

问题

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

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

以下关于xy问题的解决方案是公认的,但不能被说服。

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

1 个答案:

答案 0 :(得分: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);
  });