reactjs - 找不到未定义的属性 id
问题描述
我正在开发一个受 airbnb 启发的应用程序,我不确定为什么我的评论未定义但我的 home 对象正确返回。现在我无法显示每个列表的所有当前评论。它们存在于我的数据库中,但我不确定为什么我无法呈现它们。home_details.jsx
import React from 'react';
import { Link } from 'react-router';
import ReviewListItemContainer from './review_list_item_container';
const reviewList = (reviews) => (
reviews.map(review => (
<ReviewListItemContainer
review={review}
key={review.id}
/>
))
);
const HomeDetail = ({ home,reviews }) => {
console.log(home)
return (
<div>
<p className="details-title"> {home.description}</p>
<ul className="home-list">
<img className="index-image" src={home.picture_url}/>
<li>Mininum Nights: {home.nights}</li>
<li>Number of Beds: {home.beds}</li>
{home.average_rating &&
<li>Rating: {home.average_rating}</li>
}
</ul>
<br/>
<div className="reviews">
<h3>Reviews</h3>
{reviewList(reviews)}
</div>
</div>
);
};
export default HomeDetail;
review_list_container.js
import React from 'react';
import { connect } from 'react-redux';
const Review = ({ review, author }) => {
const { rating, body } = review;
console.log(body)
return (
<div className="review-container">
<div className='user-review-container'>
<li>{rating}</li>
<li>{author.username}</li>
<li>{body}</li>
</div>
</div>
);
};
const mapStateToProps = ({entities: { users }}, { review }) => {
return {
author: users[review.author_id]
};
};
export default connect(mapStateToProps)(Review);
home_actions.js
import * as APIUtil from '../util/home_api_util';
export const RECEIVE_HOMES = 'RECEIVE_HOMES';
export const RECEIVE_HOME = 'RECEIVE_HOME';
export const RECEIVE_REVIEW = 'RECEIVE_REVIEW';
export const receiveHomes = homes => ({
type: RECEIVE_HOMES,
homes,
});
export const receiveHome = ({ home, reviews, authors }) => ({
type: RECEIVE_HOME,
home,
reviews,
authors,
});
export const fetchHomes = filters => dispatch => (
APIUtil.fetchHomes(filters).then(homes => (
dispatch(receiveHomes(homes))
))
);
export const fetchHome = id => dispatch => (
APIUtil.fetchHome(id).then(payload => (
dispatch(receiveHome(payload))
))
);
export const createHome = home => dispatch => (
APIUtil.createHome(home).then(home => (
dispatch(receiveHome(home))
))
);
export const receiveReview = ({ review, average_rating, author }) => ({
type: RECEIVE_REVIEW,
review,
average_rating,
author,
});
export const createReview = review => dispatch => (
APIUtil.createReview(review).then(review => (
dispatch(receiveReview(review))
))
);
home_reducer.js
import {
RECEIVE_HOMES,
RECEIVE_HOME,
RECEIVE_REVIEW,
} from '../actions/home_actions';
const homesReducer = (state = {}, action) => {
Object.freeze(state)
switch(action.type) {
case RECEIVE_HOMES:
return action.homes;
case RECEIVE_HOME:
const newHome = { [action.home.id]: action.home };
console.log(home, "reducer")
return Object.assign({}, state, newHome);
case RECEIVE_REVIEW:
const { review, average_rating } = action;
const newState = Object.assign({}, state);
newState[review.home_id].reviewId.push(review.id);
newState[review.home_id].average_rating = average_rating;
return newState;
default:
return state;
}
};
export default homesReducer;
reviews_reducer.js
import {
RECEIVE_HOME,
RECEIVE_REVIEW,
} from '../actions/home_actions';
const reviewsReducer = (state = {}, action) => {
Object.freeze(state);
switch (action.type) {
case RECEIVE_HOME:
return Object.assign({}, state, action.reviews);
case RECEIVE_REVIEW:
const { review } = action;
return Object.assign({}, state, { [review.id]: review });
default:
return state;
}
}
export default reviewsReducer;
_review.json.jbuilder
json.extract! review, :id, :rating, :body, :home_id, :author_id
show.json.jbuilder
json.review do
json.partial! '/api/reviews/review', review: @review
end
json.author do
json.partial! '/api/users/user', user: @review.author
end
json.average_rating @review.home.average_rating
解决方案
尝试改变
reviews.map(review => (
<ReviewListItemContainer
review={review}
key={review.id}
/>))
进入
reviews && reviews.length>0 && reviews.map(review => (
<ReviewListItemContainer
review={review}
key={review.id}
/> ))
推荐阅读
- angular - 使用 Ngrx 从 Firebase 检查身份验证状态
- npm - 为什么即使我已经全局安装了软件包,我的命令行也无法处理全局命令?
- python - 使用数据流的对象上的 GroupByKey?
- javascript - 如何根据条件更改文本颜色?
- python - 使用 print 语句需要一些帮助
- c# - 获取所需的DataGrid行
- reactjs - 在功能组件中做出类似构造函数的反应
- python - 将熊猫数据框导出到 sql 服务器时如何修复 ProgrammingError?
- c# - 如何修复:无法连接到任何指定的 MySQL 端口
- html - 仅在 Dreamweaver 中工作的外部 CSS 样式表