从 Firebase 获取数据时，尝试在 React-Redux 中的 props 上进行 .map 时出错

Question

我一直在试图弄清楚这一点，但我不知道我做错了什么。我已经设置了React-Redux来从Firebase导入/编辑数据。我可以获取数据，但似乎无法映射数据库以使用每个数据库项。每个项目都将是一个对象，其中包含有关北部国家小径上问题的各种数据。它将有一个名称，位置，描述等...

我可以从 Firebase 访问数据。我可以console.log数组中每个跟踪对象的信息。我无法让它显示在屏幕上。

我要么得到这个error: TypeError: Cannot read property 'map' of undefined或关于对象作为 React 子项无效的错误。

以下是我的一些相关代码：

行动.js

export const fetchTrailItems = () => async dispatch => {
trailItemsRef.on("value", snapshot => {
dispatch({
type: FETCH_TRAILITEMS,
payload: snapshot
});
});
};

减速器.js

const snapshotToArray = snapshot => {
let returnArr = [];
snapshot.forEach(function(childSnapshot) {
let item = childSnapshot.val();
item.key = childSnapshot.key;
returnArr.push(item);
});
return returnArr;
};
const getTrailData = (state = [], action) => {
switch (action.type) {
case FETCH_TRAILITEMS:
const newData = snapshotToArray(action.payload);
console.log(newData);
return { ...state, trailItems: newData };
default:
return state;
}
};
const rootReducer = combineReducers({
form: formReducer,
auth: authReducer,
trailwork: trailworkReducer,
trailData: getTrailData
});
export default rootReducer;

跟踪工作清单.js

import React from "react";
import TrailworkItem from "./TrailworkItem";
import { connect } from "react-redux";
import * as actions from "../actions";
class TrailworkList extends React.Component {
componentDidMount() {
this.props.fetchTrailItems();
}
renderTrailList = () => {
console.log(this.props.trailData.trailItems);
return this.props.trailData.trailItems.map(trailItem => {
return (
<p>{trailItem}</p>
// <TrailworkItem trailItem={trailItem} key={this.props.trailItem.key} />
);
});
};
render() {
return (
<div className="ui relaxed divided list">
Hi Im a list
{this.renderTrailList()}
</div>
);
}
}
const mapStateToProps = state => {
return {
trailData: state.trailData
};
};
export default connect(mapStateToProps, actions)(TrailworkList);

我可以console.log(this.props.trailData.trailItems)并得到这个： 在此处输入图像描述

但是，如果我尝试对其进行 .map，我只会收到一个错误和"未定义"，并且除了"未定义"之外，console.log中没有任何内容出现。我想我包含了所有必要的代码。如果有人可以提供任何帮助，我将不胜感激。

Answer 1

需要先检查您是否有this.props.trailData。

renderTrailList = () => {
console.log(this.props.trailData.trailItems);
if (this.props.trailData) {
return this.props.trailData.trailItems.map(trailItem => {
return ( <
p > {
trailItem
} < /p>
// <TrailworkItem trailItem={trailItem} key={this.props.trailItem.key} />
);
});
} else {
return <p > Loading < /p>
}
};