Question

我正在使用Axios进行GET请求。我能够获取数据并将其记录到控制台。但是，当我将数据发送到我的react组件时，该值不会呈现。

这是GET请求：

getUserTotalRevenue = (id) => {
    API.getOrderUserTotal(id)
        .then(res => {
            let total = res.data[0].totalAmount.toFixed(2);
            let totalString = total.toString();
            return totalString;
        })
        .catch(error => console.log("User revenue error: " + error))
}

在此处是组件调用它的地方：

<div>
    {this.state.users.map(user => (
        <div key={user._id}>
            <Grid item lg={12}>
                <Card
                    userImage={this.checkUserImage(user)}
                    fullName={this.fullName(user.firstName, user.lastName)}
                    startDate={this.startDate(user.created_at)}                     
                    totalSales={this.getUserTotalRevenue(user._id)}
                />
            </Grid>
        </div>
    ))}
</div>

Answer 1

编写此代码返回方法。希望对您有帮助。

    <div key={user._id}>
      <Grid item lg={12}>
          <Card
           userImage={this.checkUserImage(user)}
           fullName={this.fullName(user.firstName, user.lastName)}
           startDate={this.startDate(user.created_at)}
           totalSales={this.getUserTotalRevenue(user._id)}

           />
         </Grid>
   </div>

Answer 2

这将不会呈现数据，因为axios调用将在呈现元素时被调用。为此，您可以获取OrderUserTotal数据以及用户数据（从与您获得用户数据相同的axios调用中）。否则，您可以执行一种惰性加载方法，在该方法中，可以使用某个组件的按钮来触发从Card组件获取OrderUserTotal的调用。

Answer 3

之所以没有呈现任何内容，是因为您正在进行调用，并且数据没有返回到组件。如 @ user490889 所述，您应该使用state来存储收到的值，然后使用状态来呈现它。

将Axios响应作为道具发送给组件

3 个答案: