Question

我正在忙于从教程中编写一个简单的应用程序，并且在我的工作API调用中遇到了一些麻烦。现在API肯定会被调用，因为我可以看到在浏览器中调试时返回的数据但是this.props.todos总是未定义的。现在我的怀疑是它在异步调用完成之前被渲染但我似乎无法确切地找到如何处理这种情况以使我的类在渲染之前等待。

这是我在github上的项目的链接。请随意使用代码并进一步构建。 Todo Project

这是我的index.js

const store = configureStore();

store.dispatch(loadTodos());

render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);
registerServiceWorker();

以下是我称之为

的行动部分

export function loadTodosSuccess(todos) {
  return {
    type: types.LOAD_TODOS_SUCCESS, 
    todos
  };
}

export function loadTodos() {
  return function(dispatch) {
    return todoApi.getTodos().then(todos => {

      dispatch(loadTodosSuccess(todos));
    }).catch(error => {

      throw(error);
    });
  };
}

这是我的API调用

static getTodos() {
      return fetch('http://5a0c1bfc6c25030012c335b5.mockapi.io/todos').then(response => {

        return response.json();
      }).catch(error => {

        return error;
      });
    }

最后这是我的列表组件

import React, { Component, PropTypes } from 'react';
import Card from '../Card/Card'
import classes from './CardList.css';
import { bindActionCreators } from 'redux';
import * as todoActions from '../../Actions/TodoActions';
import {connect} from 'react-redux';

class CardList extends Component {
    constructor(props) {
        super(props);
      }
    render() {

        return (

            <div className={classes.cardList}>
            {
                this.props.todos.map((todo, index) => {
                    return <Card
                    click={() => this.deleteCard(index)}
                    key={todo.id}
                    title={todo.title}
                    summary={todo.summary}
                    dateToCompleteBy={todo.dateToCompleteBy} />
                })
            }
            </div>
        );
    }
}

function mapStateToProps(state, ownProps) {

    return {
        todos: state.todos
    };
}

function mapDispatchToProps(dispatch) {

    return {
        actions: bindActionCreators(todoActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(CardList);

Answer 1

您的constexpr auto res = foo( { {}, {} } );是一个有InitialState的对象：

todos

因此，在{ todos: [], }上，您应该相应地更新它：

LOAD_TODOS_SUCCESS

API结果没有绑定React-Redux组件

1 个答案: