反応コンポーネント内のAPIからデータを表示する方法

Question

Axiosを使用してAPIからデータを取得し、取得したデータがストアに正常にディスパッチされました。現在、Reactコンポーネントにデータを表示する際にいくつか問題があります。

私はデータを正常にはconsole.logにできましたが、データがAPIから完全に取得される前にコンポーネントレンダリングが行われました。以下

データを表示するための成分である：

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import { connect } from 'react-redux'; 
import PropTypes from 'prop-types'; 
import { bindActionCreators } from 'redux'; 
import HeaderSidebar from './includes/header-navbar'; 
import AllBooks from './includes/all-books'; 
import { getAllBooks } from '../../actions/book_actions'; 


class AdminHome extends Component { 

componentDidMount() { 
    this.props.actions.getAllBooks(); 
} 

renderBooks(){ 
    const allbooks = this.props.books; 

    return allbooks.map((book) => { 
     return (<div key={book.id}> 
      <AllBooks title={book.title} 
      description={book.description} 
      /> 
     </div>) 
    }) 
} 
render() { 
    return (
     <div > 
      <HeaderSidebar /> 
      {this.renderBooks()} 
      })} 
      })} 
     </div > 
    ) 
    } 
} 

    function mapStateToProps(state) { 
    return { 
    books: state.book.data 
    } 
} 

AdminHome.PropTypes = { 
    books: PropTypes.object.isRequired 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators({ 
     getAllBooks 
    }, dispatch) 
    }; 
} 

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

アクション「../actionsから

export function getAllBooks() { 
    return dispatch => axios.get(`${API_URL}`) 
    .then((res) => { 
     dispatch({ 
     type: GET_ALL_BOOKS, 
     data: res.data 
     }); 
     return res.data; 
    }) 
    .catch(error => error); 
} 

レデューサー インポート{ADD_BOOK、 GET_ALL_BOOKSを} /タイプ';

const INITIAL_STATE = {}; 

function bookReducer(state = INITIAL_STATE, action) { 
    switch (action.type) { 
    case ADD_BOOK: 
     return { ...state, message: 'Book added Successfully' }; 
    case GET_ALL_BOOKS: 
     return { ...state, data: action.data }; 
    default: 
     return state; 
    } 
} 

export default bookReducer; 

Answer 1

データは

renderBooks(){ 
if(!this.props.books) { 
    return (<p>Loading data..<p/>); 
} 


// rest of your code here 

やデータの読み込みが完了するまで、少なくとも何もクラッシュしないように、あなたは空の配列でプロパティを初期化することができますをロードして行われるまでは、何か他のものを表示することができます。

function mapStateToProps(state) { 
    return { 
    books: state.book.data || [] // maybe have to extra checks here if state.book doesn't exist yet 
} 

（またはその両方を行うには、if(this.props.books.length < 1)にif(!this.props.books)を変更します。