reactjs - ReactJS：更新同一个对象的 2 个 api 调用 - 可能发生冲突？

Question

我有一个 React 应用程序，我想要 2 个单独的 REST API 调用，一个接一个地调用，以更新同一个对象。就像这样：

getAllTRLabs(
  (data) => {
    let newLabs = labsAllTypes
    newLabs.tr = data.translation_labs
    setLabsAllTypes(newLabs)
  },
  (err) => console.log(err)
)

getAllEduLabs(
  (data) => {
    let newLabs = labsAllTypes
    newLabs.edu = data.eduLabs
    setLabsAllTypes(newLabs)
  },
  (err) => console.log(err)
)

getAllTRLabs 和 getAllEduLabs 处理 API 调用，它们被定义为函数（onsuccess，onerror）。所以基本上对于每个 API 调用，labsAllTypes 对象都会更新结果（getAllTRLabs 更新“tr”字段，getAllEduLabs 更新“edu”字段）。现在它似乎工作了，但我有点担心这两个 API 调用之间可能存在冲突，如果他们尝试同时更新 labsAllTypes 并且我们最终只保存了一个更新。所以我的问题是，React 是否可以防止此类冲突？或者我的担心是否有效，如果是，我怎样才能更好地实现这一点？

标签： reactjs

Answer 1

我们可以尝试使用扩展运算符。

getAllTRLabs(
  (data) => {
    let newLabs = labsAllTypes
    setLabsAllTypes({...newLabs, 'tr': data.translation_labs})
  },
  (err) => console.log(err)
)

getAllEduLabs(
  (data) => {
    let newLabs = labsAllTypes
    setLabsAllTypes({...newLabs,'edu': data.eduLabs})
  },
  (err) => console.log(err)
)