![](/img/trans.png)
[英]TypeError: undefined is not a function (evaluating 'categories.map')
[英]TypeError: undefined is not a function (evaluating userItems.map)
編輯:現在我正在使用“ react-native-navigation @ latest”,一切都很好。
當我第一次打開應用程序時, 它可以正確處理數據,但是在發生第二次刷新錯誤之后
TypeError:未定義不是函數(正在評估“ userItems.map”)
該錯誤位於:
在用戶中(由Connect(Users)創建);
........
組件/Users.js
componentWillMount(){
this.props.fetchUsers();
}
render() {
const userItems = this.props.users || [];
const abc = userItems.map((user,index) => (
<Text key={index}>
{user.email}
</Text>
));
return (
<View>
{abc}
</View>
);
}
}
const mapStateToProps = state => ({
users: state.UserReducer.items
})
const mapDispatchToProps = {
fetchUsers
};
export default connect(mapStateToProps, mapDispatchToProps)(Users);
動作
export function fetchUsers() {
return dispatch => {
fetch("http://example.com/v1/users")
.then(res => res.json())
.then(users =>
dispatch({
type: FETCH_USERS,
payload: users
})
);
};
}
reducer / userReducer.js
import { FETCH_USERS } from "../Actions/types";
const initialState = {
items: []
};
const userReducer= (state = initialState, action) => {
switch(action.type){
case FETCH_USERS:
return {
...state,
items:action.payload
}
default:
return state;
}
}
export default userReducer;
reducer / index.js
import UserReducer from './userReducer';
const AppReducer = combineReducers({
...
UserReducer,
...
...
...
});
export default AppReducer;
后端很好,我和郵遞員在一起
用戶后端
const router = new express.Router();
router.route("/users").get((req, res) => {
User.find({},{password:0}, (err, users) => {
if (err) {
return res.status(404).send({message: "error"});
console.log(err);
} else {
return res.status(200).send({users});
}
});
});
響應后端
{
"users": [
{
"dateCreated": "..",
"dateModified": "...",
"lastLogin": "...",
"_id": "...",
"email": "...",
"__v": 0
},
{
"dateCreated": "..",
"dateModified": "...",
"lastLogin": "...",
"_id": "...",
"email": "...",
"__v": 0
}
]
}
package.json依賴項
"dependencies": {
"asyncstorage": "^1.5.0",
"es6-promise": "^4.2.4",
"react": "16.3.1",
"react-native": "0.55.3",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "v1.0.0-beta.26",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-persist": "^5.9.1",
"redux-thunk": "^2.2.0"
},
您確定要在MapDispatchToProps中映射動作嗎? (理想情況下,此帖子將是評論,但我還沒有評論權限)。
const mapDispatchToProps = (dispatch) => {
return {
fetchUsers: () => dispatch(fetchUsers());
};
};
如果/users
響應是這樣的:
{
"users": [
{
"dateCreated": "..",
"dateModified": "...",
"lastLogin": "...",
"_id": "...",
"email": "...",
"__v": 0
}
]
}
然后,在調度FETCH_USERS
,您應該這樣做:(注意payload屬性)
export function fetchUsers() {
return dispatch => {
fetch("http://example.com/v1/users")
.then(res => res.json())
.then(data =>
dispatch({
type: FETCH_USERS,
payload: data.users
})
);
};
}
或者,您可以在化簡器中執行此操作(請注意items屬性):
const userReducer= (state = initialState, action) => {
switch(action.type){
case FETCH_USERS:
return {
...state,
items: action.payload.users
}
default:
return state;
}
}
看起來您的代碼正在使用來自給定代碼示例的react-native-router-flux(具有react-navigation作為依賴項)。 github上列出了一個未解決的問題。 如該SO答案中所述,當前的解決方案是使用beta26版本的react-native router-flux。 我懷疑這會解決您的問題。 如果沒有,那么值得一試! ..
Hth ..
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.