Saya sibuk menulis aplikasi sederhana dari tutorial dan mengalami sedikit masalah dengan panggilan API saya yang berfungsi. Sekarang API pasti dipanggil karena saya dapat melihat data dikembalikan saat debugging di browser tetapi this.props.todos selalu tidak terdefinisi. Sekarang kecurigaan saya adalah bahwa itu dirender sebelum panggilan async selesai, tetapi sepertinya saya tidak dapat menemukan dengan tepat bagaimana menangani situasi ini untuk membuat kelas saya menunggu sebelum merender.

Berikut ini tautan ke proyek saya di github. jangan ragu untuk menggunakan kode dan membangun lebih lanjut. Proyek Tugas

Ini index.js saya

const store = configureStore();

store.dispatch(loadTodos());

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

Inilah bagian dari tindakan yang saya sebut

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);
    });
  };
}

Ini panggilan API saya

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

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

        return error;
      });
    }

Dan terakhir inilah komponen daftar saya

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);
1
Sl1ver 24 November 2017, 14:18

1 menjawab

Jawaban Terbaik

InitialState Anda adalah objek yang memiliki todos:

{
  todos: [],
}

Jadi pada LOAD_TODOS_SUCCESS, Anda harus memperbaruinya:

case types.LOAD_TODOS_SUCCESS:
  return {
    ...state,
    todos: action.todos
  }
2
mersocarlin 24 November 2017, 11:30