在 componentDidMount 中设置状态时，React 应用程序不显示来自 api 的数据

Question

当从 Laravel 控制器返回响应时，例如

return response()->json([

    'status' => true,

    'message' => 'success',

    'cat_products' => $cat_products,

    'cat_count' => $cat_count

]);

然后，实际数组可在 javascript 端的 response.data 键下使用。

由于您在 if 语句中进行松散比较，因此它与 response.status: 200 进行比较，而不是与您"status" => true在 json 响应中提供的比较

if (response.status == true) {

    //response.data should contain the data sent as response from controller

    console.log(response.data); 

    

    //response.cat_products.forEach(filter); //filter is a function

    response.data.cat_products.forEach(filter);  //this should work

}

Answer 1

由于您返回的是一个数组而不是一个对象，因此getPagedData您需要将其更新componentDidMount为：componentDidMount(){  const [aircrafts, totalCount] = this.getPagedData();  this.setState({ aircrafts, totalCount });}

Answer 2

在getPageData函数中，您返回一个数组。但你正在解构一个对象return [ aircrafts, totalCount ];而不是这个return { aircrafts, totalCount };