在promise.all()内部的setState反应

时间:2018-01-02 20:12:05

标签: javascript reactjs

我正在尝试构建一个小的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 >
);

2 个答案:

答案 0 :(得分:3)

@developer.releases << @release 将您的承诺解析为一系列结果,更改您的Promise.all以获取此数组,然后您可以使用数组语法访问其结果:

.then

答案 1 :(得分:3)

我在你的例子中看到两个问题。 Promise.all解析为单个变量,即数组。此数组的元素是您的调用结果。所以:

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

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

当您调用setState时,您无法立即看到状态,因为该方法是异步的。如果你想这样做,试试:

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