экспресс-редукс, возвращающий данные в виде массива из обещания

Question

Когда я помещаю массив в возврат, все отлично работает с диспетчеризацией и рендерингом элементов reducer-items.js.Я не уверен, что мне не хватает, но данные, когда я изменяюсь, не показывают

    export default function () {
          return [
              {id: 1, first: "Maxx", last: "Flinn", age: 17},
              {id: 2, first: "Allen", last: "Matt", age: 25},
          ]
    }

, когда я запускаю асинхронную функцию для получения данных с экспресс-сервера, я могу просмотреть ответ и получить данные.

let items;
let callApi = async () => {
    console.log("calling API");

    const response = await fetch('/api/hello');
    console.log("response", response);

    const body = await response.json();

    if (response.status !== 200) throw Error(body.message);
    console.log("body API", body);
    items = body;
    return body;
  };


export default function () {
      return[ callApi() ]
}

server.js

const express = require('express');

const app = express();
const port = process.env.PORT || 5000;

var data = [
     {id: 1, first: "Maxx", last: "Flinn", age: 17},
     {id: 2, first: "Allen", last: "Matt", age: 25},
]


app.get('/api/hello', (req, res) => {

  res.json([
     {id: 1, first: "Maxx", last: "Flinn", age: 17},
     {id: 2, first: "Allen", last: "Matt", age: 25},
  ]);
});

app.listen(port, () => console.log(`Listening on port ${port}`));

Я не получаю никакой ошибки, но вместо обработки данных [{}, {}] я выполняю [Promise] и не вижу никаких данных,Не уверен, что я вернусь правильно.мой console.log при рендере показывает.

 [Promise]0: 
    Promise__proto__: 
       Promise[[PromiseStatus]]: 
          "resolved"[[PromiseValue]]: 
                  Array(2)
   0:{id: 2, first: "Allen", last: "Matt", age: 25, }
   1: {id: 3, first: "Kris", last: "Chen", age: 23, …}

это мой контейнер item-list.js

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import { selectedItem } from '../actions/index';

class ItemList extends Component {
  renderList() {
        return this.props.items.map((item) => {
            return (
                <li key={item.id}
                    onClick={() => this.props.selectedItem(item)}
                >
                    {item.first} {item.last}
                </li>
            );
        });
    }


   render() {
     console.log("render", this.props.items);
     return (
       <ul>

         {this.renderList()}
       </ul>
     );
   }
}
function mapStateToProps(state) {
  return {
    items: state.items,
  };

}

function matchDispatchToProps(dispatch) {
  return bindActionCreators({ selectedItem: selectedItem }, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(ItemList);

Answer 1

Асинхронные функции возвращают обещания, поэтому вам нужно использовать их следующим образом:

callApi().then((data) => {
    // use the data here...
});

Если вы вызываете эту функцию много раз, вы можете поместить все обещания в массив, а затем использовать Promise..all () , чтобы разрешить все обещания вместе.Таким образом, вы можете взять массив [Обещание] и сделать это:

Promise.all(arr).then((data) => {
    // in this case data will be an Array with the values
});