У меня есть небольшое грубое приложение, которое я пытаюсь создать и вывести в него. Мне нужно сделать 3 разных вызова api, каждый из которых возвращает обещание, и с помощью этого я пытаюсь назначить каждое обещание возврата в его собственном состоянии.

export default class TableExampleControlled extends Component {

state = {
 rentalsData: [],
 driversData: [],
 vehiclesData: [],
};

componentDidMount() {
 Promise.all([rentals(), drivers(), vehicles()])
 .then((rentalsData,driversData, vehiclesData) => {
   this.setState({ rentalsData,driversData, vehiclesData });
   console.log(this.state)
});
};
render() {     
 const rentalEntries = this.state.rentalsData
 const tableRow = rentalEntries.map((data) =>
 <TableRow selected={this.isSelected(0)}>
    <TableRowColumn key={data.status}>{data.status}</TableRowColumn>
    <TableRowColumn key={data.vehicle}>{data.vehicle}</TableRowColumn>
    <TableRowColumn key={data.driver}>{data.driver}</TableRowColumn>
    <TableRowColumn key={data.email}>{data.email}</TableRowColumn>        
    <TableRowColumn key={data.start_date}>{data.start_date}</TableRowColumn>
    <TableRowColumn key={data.end_date}>{data.end_date}</TableRowColumn>
    <TableRowColumn key={data.rate}>{data.rate}</TableRowColumn>
  </TableRow >
);
2
Pat Lopes 2 Янв 2018 в 23:12

2 ответа

Лучший ответ

В вашем примере я вижу две проблемы. Promise.all преобразуется в единственную переменную, которая является массивом. Элементы этого массива - это результаты ваших звонков. Так:

.then(result => {
  const [ rentalsData, driversData, vehiclesData ] = result;

  this.setState({ rentalsData,driversData, vehiclesData });  
});

Также вы не можете сразу увидеть состояние при вызове setState, потому что этот метод асинхронный. Если хотите, попробуйте:

this.setState({ rentalsData,driversData, vehiclesData }, () => {
  console.log(this.state);
});
4
Krasimir 2 Янв 2018 в 20:25

Promise.all преобразовывает ваши обещания в массив результатов, измените .then, чтобы он принимал этот массив, а затем вы можете получить доступ к его результатам, используя синтаксис массива:

Promise.all([rentals(), drivers(), vehicles()])
 .then((results) => {
   this.setState({ 
     rentalsData: results[0],
     driversData: results[1], 
     vehiclesData: results[2] 
   });
});
3
linasmnew 2 Янв 2018 в 20:17