为什么我的获取请求数据不会出现在我的应用程序中

Question

我正在开发一个带有Railsneneneba API的React-Redux应用程序。我正在通过我的reviewsFetch操作发出获取请求，该操作运行正常，并出现在我的控制台中。然而，我正在尝试构建ReviewList文件和ReviewCard文件，我希望我的获取数据显示在页面上(一个示例JSON数据读作data.review.attributes.title(，我得到了很多未定义的错误。

目前，我的constReviewList中的"props"是未定义的，我很确定"reviews"也是，我不知道为什么。

/操作/审查etch.js

export const getReviews = reviews => {
return {
type: "GET_REVIEWS",
reviews
}
} //action creator

export const reviewsFetch = () => {
return dispatch => {
fetch('http://localhost:3000/api/v1/reviews', {
method: "GET",
headers: {
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(reviews => dispatch (getReviews(reviews.data)))
}
}

/减速器/审查Reducer.js

export default function reviewReducer (state = {reviews: [], comments: []}, action) {
switch (action.type) {
case "GET_REVIEWS":
return {...state, reviews: action.reviews}
default:
return state
}
}

/containers/ReviewsContainer.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { reviewsFetch } from "../actions/reviewsFetch.js";
//import ReviewCard from "../components/reviews/Reviews";

class ReviewsContainer extends Component {
componentDidMount() {
this.props.reviewsFetch();
}
render() {
return (
<div>
</div>
);
}
}
const mapStateToProps = state => {
return {
reviews: state.reviews
};
};
export default connect(
mapStateToProps,
{ reviewsFetch }
)(ReviewsContainer);

/components/MainContainer.js

import React from 'react'
import ReviewList from './reviews/ReviewList'
const MainContainer = () => {
return (
<div className="MainContainer">
<ReviewList />
</div>
)
}
export default MainContainer

/components/reviews/ReviewList.js

import React from 'react'
import ReviewCard from './ReviewCard'
import { connect } from 'react-redux'
const ReviewList = props => {
const reviewCards = props.reviews.map(r => <ReviewCard review={r}/>)
return (
reviewCards.length > 0 ? reviewCards : null
)
}
//mapstatetoprops tells redux to provide access to its state
//so we may pick and choose the pieces of state we would like available
//to this particular component as props
const mapStateToProps = state => {
return {
reviews: state.reviews
}
}
export default connect(mapStateToProps)(ReviewList)

/components/reviews/ReviewCard.js

import React from 'react'
const ReviewCard = ({ review }) => {
return (
<p>{review.data.attributes.title}</p>
)
}
export default ReviewCard

app.js

import React from 'react';
import './App.css';
//import reviewsFetch from "./actions/reviewsFetch.js"
import ReviewsContainer from './containers/ReviewsContainer';
import ReviewList from './components/reviews/ReviewList'
//import ReviewCard from './components/reviews/ReviewCard'
class App extends React.Component {
componentDidMount() {
//this.props.reviewsFetch()
}
render(){
return (
<div className="App">
<img className="App-logo" src="https://i.ibb.co/fXg9HgB/2-22657-smiley-face-black-and-white-smiley-face-clipart.png" alt="spite-house-smiley"/>

<br></br>
<ReviewsContainer />
<ReviewList />
</div>
);
}
}
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import App from './App.js';
import store from './store.js';
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>,
document.getElementById('root')
);

store.js

import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import reviewReducer from './reducers/reviewReducer'
const reducers = combineReducers({
reviewReducer
})

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, composeEnhancer(applyMiddleware(thunk)))
export default store

Answer 1

当使用HTTP请求获取数据时，它在初始渲染中不可用。你必须等待它解决。

您可以在组件中添加检查，如下所示：

const reviewCards = props?.reviews?.map?.(r => <ReviewCard review={r}/>)

上述方法使用可选的链接。

或者，您可以有条件地检查数据是否已成功提取，并切换加载状态。