Каковым был бы правильный способ прикреплять результаты двух request с моим API?

То, что я пробую сделать, состоит в том, чтобы реализовывать два request в мой API, разделять результаты и объединять их в той же таблице. То, в чем я нуждаюсь главным образом, состоит в том, чтобы таблица повторилась с length items как дела сейчас, но который он также смог включать в каждый <tr> что создается details.description и details.url что приходят в другом request.

Это ясно дает ошибку, но мне хотелось бы знать, как он делается правильно. Я сделал это таким, чтобы давать пример более или менее, которого я пробую делать:

import React from 'react';
import LateralMenu from '../../components/LateralMenu';

const style = {
  'font-size':'16px',
}

class demosList extends React.Component {

constructor() {
    super();
         this.state={items:[]};
  }
  componentDidMount(){
    fetch(`http://localhost:3000/api/demos`)
        .then(result=>result.json())
    .then(items=>this.setState({items}))
  }

 componentDidMount(){
    fetch('http://localhost:3000/api/details')
        .then(result=>result.json())
    .then(details=>this.setState({details}))
  }
  render() {

     return ( 
     	 <div>
           <LateralMenu/>
     	   <div className="main">
             <center><h2>All demos</h2></center>
             <hr />
             <table className="table table-striped">
               <thead>
                 <tr>
                   <th>Name</th>
                   <th>Description</th>
                   <th>Url</th>
                   <th>Options</th>
                 </tr>
               </thead>
             <tbody>
             {
               this.state.items.length ?
                 this.state.items.map(item=>
                   <tr>
                     <td>{item.name}</td>
                 )
                 (details=>
                   <td>{details.description}</td>
                   <td>{details.url}</td>
                   <td>
                     <a href="#"><b>Edit</b></a> | 
                     <a className="red" href="#">Delete</a>
                   </td>
                 </tr>
                 ) 
                 : <li>Loading...</li>
             }
           </tbody>
         </table>
       </div>
     </div>);
   }
}

export default demosList;
0
задан 13.01.2017, 18:10
0 ответов

Конечно же ты не можешь определять два раза метод componentDidMount но ты можешь называть метод fetch после того, как первый оказался правильным:

Редактирование: Я не совсем уверен, что они содержат переменные состояния items и details, но я понимаю, что следующее может подавать тебя.

    import React from 'react';
import LateralMenu from '../../components/LateralMenu';

const style = {
    'font-size':'16px',
}

class demosList extends React.Component {

constructor() {
    super();
         this.state={items:[]};
    }

    componentDidMount() {
        fetch(`http://localhost:3000/api/demos`)
            .then(result => result.json())
            .then(items => {
                this.setState({items});
                fetch('http://localhost:3000/api/details')
                    .then(result => result.json())
                    .then(details => this.setState({details}));
            });
    }

    render() {
        const { items, details } = this.state;

        return (
            <div>
                <LateralMenu />
                <div className="main">
                    <center>
                        <h2>All demos</h2>
                    </center>
                    <hr />
                    <table className="table table-striped">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Url</th>
                                <th>Options</th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.state.items.length ? getTableRow(item.name, details) : <li>Loading...</li>}
                        </tbody>
                    </table>
                </div>
            </div>
        );
   }

   getTableRow(name, details) {
        return (
            <tr>
                <td>{name}</td>
                <td>{details.description}</td>
                <td>{details.url}</td>
                <td>
                    <a href="#">
                        <b>Edit</b>
                    </a>
                    <span> | </span>
                    <a className="red" href="#">Delete</a>
                </td>
           </tr>
       );
   }
}

export default demosList;
1
ответ дан 03.12.2019, 17:41
  • 1
    И после в td, поскольку он бы это показал? Poruqe пробовал как это у него было там, но он дает мне ошибку enclosing tags –  13.01.2017, 17:20
  • 2
    Он не служит, остается грузя, но не беспокойся лучше я предпочту перемещать всю дату в ту же базу данных и так показывать ее в единственном response и я заношу в список. Спасибо за все –  13.01.2017, 18:24

Теги

Похожие вопросы