Question

我收集了两个不同的对象构成一个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"
  }
}]

Answer 1

根据您现在所拥有的内容，以下将对其进行修复。

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

但是，我将等待您的进一步澄清，然后再编辑此答案。

Answer 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}
}

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

我猜想您仅想在安装组件时创建帖子部分阵列。所以您可以使用我建议一次调用createPostSeccionArray的promise吗？

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

3 个答案: