如何在React组件中显示来自api的数据 [英] How to display data from api in react component
问题描述
我正在使用axios从API获取数据,并且检索到的数据已成功分发到商店,目前在将数据显示在React组件中存在一些问题.
I am using axios to get data from an API and the retrieved data was successfully dispatched to the store, I currently have some problems in displaying the data in my React component.
我能够成功地console.log
数据,但事实证明,在从API完全检索数据之前,我的组件已呈现.
I was able to console.log
the data successfully but it turns out my component renders before the data was fully retrieved from the 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);
操作
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 },来自"../actions/types";
Reducers import { ADD_BOOK, GET_ALL_BOOKS } from '../actions/types';
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;
推荐答案
在数据加载完成之前,您可以显示其他内容
You can show something else until the data is done loading
renderBooks(){
if(!this.props.books) {
return (<p>Loading data..<p/>);
}
// rest of your code here
或者您可以使用一个空数组初始化该属性,以便在完成数据加载之前至少没有崩溃.
Or you can initialize the property with an empty array so that at least nothing crashes until the data is done loading.
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)
更改为if(this.props.books.length < 1)
.
(Or do both, and change if(!this.props.books)
to if(this.props.books.length < 1)
.
这篇关于如何在React组件中显示来自api的数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!