오류

Question

내가 itens의 배열 목록에 재귀와 반응 구성 요소를 만들려고 해요 반응에 재귀와 UL를 만들지 만, JS는 "너무 많은 재귀 않고 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> 
    ) 


}