如何显示组件列表，每个组件都有很多组件，这些组件具有从服务器获取的数据

Question

我正在创建一个团队列表，每个团队可能有很多董事会（包括卡片，待办事项，列表等）。根据我的理解，我已经写了一些代码。但是不能列出具有分配的董事会的团队。在API端，通过将每个团队名称发送到端点并获取包含相关数据的响应来针对每个团队获取板或数据的数量。

getBoards(){

        var someval=[];
        let otherDoc = [];
        otherDoc = this.props.documents;
        if(otherDoc.length === 0){
            var another = this.state.documents.map( teamItems=>{
                const teamBoards = {
                    team_boards: teamItems.team_name
                }
               var anotherone =  axios.post('http://localhost:4000/b/team- 
                                                           boards',teamBoards)
                .then(response =>{

                   someval= response.data.map(item =>{
                        return item.boardname
                    })

                    return someval
                  //  return  <TeamBoard key={teamItems._id} team_name={teamItems.team_name} />

                })

              return <TeamBoard key={teamItems._id} team_name={teamItems.team_name} board_names={anotherone}/>

            })

            return another;

        }else{

            //some code
    }

     render() {

           var showteams = this.getBoards();

         return (
             <div>
              <div className="boards-page-boards-section">
                        <div className="row boards-page-title-section">
                            <span><i className="fas fa-user-friends"></i></span> <span><h3 className="boards-page-board-title">Team Roar board</h3></span>
                            <div className="borads-page-boards-section-title" >
                                <div className="boards-page-team-boards-items" >
                                    <span className="fas fa-clipboard-list" style={{ marginLeft: '6px' }}></span>
                                    <span className="boards-page-team-style" >Boards</span>
                                </div>
                                <div className="boards-page-team-boards-items">
                                    <span className="far fa-user" style={{ marginLeft: '6px' }}></span>
                                    <span className="boards-page-team-style" >Memebers</span>
                                </div>
                                <div className="boards-page-team-boards-items" >
                                    <span className="fas fa-cog" style={{ marginLeft: '6px' }}></span>
                                    <span className="boards-page-team-style" >Setting</span>
                                </div>
                            </div>
                        </div>
                        <ul className="boards-page-board-list" >

                            <li className="boards-page-board-list-item card-primary">
                                <div className="boards-page-list-item-title"  >
                                    <div className="board-tile-details">
                                        <div title="Board Name" dir="auto" className="board-tile-details-name" >
                                            Board Name one
                                </div>

                                    </div>
                                </div>
                            </li>
                            <li className="boards-page-board-list-item card-create">
                                <div className="boards-page-list-item-title" >
                                    <div className="board-tile-details">
                                        <div title="Board Name" dir="auto" className="board-tile-details-name" style={{ marginTop: '17px' }}>
                                            Create new board..
                                </div>

                                    </div>
                                </div>
                            </li>

                        </ul>

                    </div>

                    {/* showing teams here and their boards inside of */}

                    {showteams}

                </div>
         )

     }

我希望输出的内容像是一组带董事会的团队，但是一组团队却展示了这种凌乱的代码，以响应API的响应数据，从而给我带来了Promise的价值。