promise.all() 中的 setState 反应答案

【问题标题】：setState inside promise.all() reactpromise.all() 中的 setState 反应
【发布时间】：2018-01-03 04:25:32
【问题描述】：

我有一个小型 crud 应用程序，我正在尝试构建和输出一些数据。我必须进行 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 >
);

【问题讨论】：

有什么问题？
我想你可能有错字。您需要在.then 的回调参数周围加上括号[ ] 才能解构数组。

标签： javascript reactjs

【解决方案1】：

我在您的示例中看到了两个问题。 Promise.all 解析为一个数组变量。该数组的元素是您调用的结果。所以：

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

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

此外，当您调用 setState 时，您无法立即看到状态，因为该方法是异步的。如果你想尝试：

this.setState({ rentalsData,driversData, vehiclesData }, () => {
  console.log(this.state);
});

【讨论】：

【解决方案2】：

Promise.all 将你的 Promise 解析为一个结果数组，将你的 .then 更改为采用这个数组，然后你可以使用数组语法访问它的结果：

Promise.all([rentals(), drivers(), vehicles()])
 .then((results) => {
   this.setState({ 
     rentalsData: results[0],
     driversData: results[1], 
     vehiclesData: results[2] 
   });
});

【讨论】：