如何从两个现有对象正确创建对象

Posted 2023-02-22

【中文标题】如何从两个现有对象正确创建对象

【英文标题】：How to properly create an object from two existing objects

【发布时间】：2019-09-09 20:44:29

【问题描述】：

我已经收集了两个不同的对象形成一个 api，我想在将它们传递给子组件之前将它们组合成一个。

我尝试循环其中一个以将第三个创建到 ComponentDidUpdate 中（可能不是正确的方法），这会弹出一个错误：“超出最大更新深度。当组件在 componentWillUpdate 内重复调用 setState 或componentDidUpdate.React 限制嵌套更新的数量，以防止无限循环。”

export default class Router extends Component 

    state = 
        posts : [],
        secciones : [],
        postSeccion : [],
    

    componentWillMount() 
        this.obtenerPublicaciones(); //calling api
        this.obtenerSecciones(); //calling api
    

    componentDidUpdate(prevProps, prevState) 

      this.createPostSeccionArray();


    

    createPostSeccionArray() 
      const posts = [...this.state.posts];
      const secciones = [...this.state.secciones];

      //check if the two objects were fetched (sometimes didn't finish fetching one of them)
      if(posts.length !== 0 && secciones.length !== 0 ) 

        let postSeccionArray = [];

        posts.forEach(element => 

          const postSeccionElement = ;
          const actualPost = element;
          const actualSeccion = secciones.find(el => el.id == actualPost.id);
          postSeccionElement.post = actualPost;
          postSeccionElement.seccion = actualSeccion;
          postSeccionArray = [...postSeccionArray, postSeccionElement];
        );

        this.setState(
          postSeccion: postSeccionArray,
        )
      

    

这是我期望的对象的输出数组：

[
  "post": 
    "id": 1,
    "titulo": "Publicación 1",
    "cuerpo": "<p>test <b>asdasd</b></p>",
    "seccion": 1,
    "fecha_creacion": "2019-04-16T15:16:36.181618Z",
    "fecha_edicion": "2019-04-16T15:16:36.181651Z",
    "autor": 1
  ,
  "seccion": 
    "id": 1,
    "nombre": "Deportes",
    "descripcion": "test"
  
]

【问题讨论】：

你当前的输出是什么？

你需要在你的setState之前添加条件，否则它会无限循环结束

我很困惑，为什么posts 和secciones 的初始状态被初始化为数组，而你说它们是对象？ （我知道数组是js中的对象，但你理解我的查询

您能分别指定posts 和secciones 的外观吗？

@JibinJoseph 他们看起来就像在第三个对象中一样

【参考方案1】：

根据您现在的情况，以下将解决它。

  componentDidUpdate(prevProps, prevState) 
    if(!prevState.postSeccion.length > 0)
      this.createPostSeccionArray();
    
  

但是，我将等待您的更清楚，然后我将编辑此答案。

【讨论】：

考虑投票/接受适合您的解决方案 :)

【参考方案2】：

要合并 2 个（或更多）对象，您可以使用扩展运算符

const a = 
  prop1 : "value1",
  prop2 : 23455,
  prop3 : "Hello"


const b = 
  prop2 : 67899,
  prop4 : "Workl"


const c = ...a, ...b
console.log(c)

如果你想要其他对象的内容，你可以做类似的事情

const secciones =  // stuff ;

const newObj = 
  prop1 : ...
  prop2 : ...
  secciones : ...secciones

【参考方案3】：

首先你可以使用 map 函数来重构你的 createPostSeccionArray 方法：

export default class Router extends Component 
  state = 
    posts: [],
    secciones: [],
    postSeccion: []
  

  componentWillMount() 
    Promise.all(this.obtenerPublicaciones(), this.obtenerSecciones()).then(_ =>
      this.createPostSeccionArray()
    )
  

  createPostSeccionArray() 
    const posts = [...this.state.posts]
    const secciones = [...this.state.secciones]

    // check if the two objects were fetched (sometimes didn't finish fetching one of them)
    if (posts.length !== 0 && secciones.length !== 0) 
      const postSeccionArray = posts.map(element => 
        const actualSeccion = secciones.find(el => el.id == element.id)
        return 
          post: element,
          seccion: actualSeccion
        
      )

      this.setState(
        postSeccion: postSeccionArray
      )
    
  

我猜你只想在安装组件时创建你的 post section 数组。那么你能像我建议的那样使用 promise 来调用 createPostSeccionArray 一次吗？

【讨论】：

这仍然会以无限循环结束，因为您在没有任何条件的情况下调用 setState，您需要在更新状态时结束某种条件而不是在没有任何检查的情况下更新

我们不再调用componentDidUpdate，所以没有死循环

阅读此UNSAFE_componentWillMount