エラー反応

Question

に再帰とULを作成するときに、私はitensの配列リストに再帰とコンポーネントを反応を作成しようとしているが、JSが示す：「

その原因1020 loopingsが、私はドン「InternalErrorをあまりにも多くの再帰」再帰メソッドの状態を変更する。そして私は間違いがどこにあるかはわかりません。誰でも私を見せて、これを解決するために必要なことを言うことができますか？ネストされたリストを作成するためのメソッドが最高であるかどうかはわかりませんが、この問題を再帰で解決しようとしていますが、まだ新しいパターンを開いています。ありがとう。

import React, { Component } from 'react'; 

import Service from '../itemOrcamento/Service' 

class Ul extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      lista: [], 
     } 
    } 


    componentDidMount(){ 
    Service.carregarLista(this.props.id) 
    .then(lista => { 
     this.setState({ 
     lista: lista.data, 
     }) 
    }) 
    } 

    buscaFilhos(item){ 
    let filhos = [] 
    let items = this.state.lista 
    items.map(filho => { 
     if (filho.codigo_item_pai == item.codigo_item_pai) filhos.push(filho) 
    }) 
    this.criaListaFilhos(filhos) 
    } 

    criaListaFilhos(filhos){ 
    return (
     <ul> 
     {filhos.map(filho => { 
      return (
      <li>{filho.codigo_cliente}, ordem: {filho.numero_sequencia} 
       {this.buscaFilhos(filho)} 
      </li> 

     ) 
     })} 
     </ul> 
    ) 
    } 

    makeList(itens) { 
    if (itens.length) { 
     let lista = itens.map((item, key) => { 
     if (item.fields.codigo_item_pai) return 
     return (
      <div> 
       <li> item: {item.fields.codigo_cliente}, ordem: {item.fields.numero_sequencia} </li> 
       {this.buscaFilhos(item)} 
      </div> 
     ) 
     }) 
     return lista 
    } 
    return 
    } 

    render() { 
    return (
     <div> 
     <ul> 
      {this.makeList(this.state.lista)} 
     </ul> 
     </div> 
    ) 
    } 
} 

export default Ul; 

Answer 1

craListaFilhosをマージしましたか？とBuscaFilos？

Promise.all(items.map(filho => { 
     if (filho.codigo_item_pai == item.codigo_item_pai) filhos.push(filho) 
    })).then(() => { 
return (
     <ul> 
     {filhos.map(filho => { 
      return (
      <li>{filho.codigo_cliente}, ordem: {filho.numero_sequencia} 
       {this.buscaFilhos(filho)} 
      </li> 

     ) 
     })} 
     </ul> 
    ) 


}