[英]TypeError: undefined is not a function (evaluating userItems.map)
Edit: Now i'm using "react-native-navigation@latest" everything is fine. 编辑:现在我正在使用“ react-native-navigation @ latest”,一切都很好。
When i open the app first time it is fething data properly but after second refresh error occured 当我第一次打开应用程序时, 它可以正确处理数据,但是在发生第二次刷新错误之后
TypeError: undefined is not a function (evaluating 'userItems.map') TypeError:未定义不是函数(正在评估“ userItems.map”)
this error is located at: 该错误位于:
in Users (created by Connect(Users)); 在用户中(由Connect(Users)创建);
.... ........ ....
Component/Users.js 组件/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);
Actions 动作
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 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 reducer / index.js
import UserReducer from './userReducer';
const AppReducer = combineReducers({
...
UserReducer,
...
...
...
});
export default AppReducer;
backend is fine i testes with postman 后端很好,我和邮递员在一起
users backend 用户后端
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});
}
});
});
response backend 响应后端
{
"users": [
{
"dateCreated": "..",
"dateModified": "...",
"lastLogin": "...",
"_id": "...",
"email": "...",
"__v": 0
},
{
"dateCreated": "..",
"dateModified": "...",
"lastLogin": "...",
"_id": "...",
"email": "...",
"__v": 0
}
]
}
package.json dependencies 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"
},
Are you sure you're mapping your action inside your MapDispatchToProps? 您确定要在MapDispatchToProps中映射动作吗? (Ideally this post would be a comment but I do not have comment permissions yet). (理想情况下,此帖子将是评论,但我还没有评论权限)。
const mapDispatchToProps = (dispatch) => {
return {
fetchUsers: () => dispatch(fetchUsers());
};
};
If /users
response is this : 如果/users
响应是这样的:
{
"users": [
{
"dateCreated": "..",
"dateModified": "...",
"lastLogin": "...",
"_id": "...",
"email": "...",
"__v": 0
}
]
}
Then when dispatching FETCH_USERS
, you should do it like this : (notice the payload property) 然后,在调度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
})
);
};
}
Or you can do this inside the reducer (notice the items property) : 或者,您可以在化简器中执行此操作(请注意items属性):
const userReducer= (state = initialState, action) => {
switch(action.type){
case FETCH_USERS:
return {
...state,
items: action.payload.users
}
default:
return state;
}
}
It looks like your code is using the react-native-router-flux (which has react-navigation as a dependency), from the code sample given. 看起来您的代码正在使用来自给定代码示例的react-native-router-flux(具有react-navigation作为依赖项)。 There is an open issue with this listed on github . github上列出了一个未解决的问题。 The current solution to this, as discussed in this SO answer is to use the beta26 version + of react-native router-flux. 如该SO答案中所述,当前的解决方案是使用beta26版本的react-native router-flux。 I suspect this will solve your problem. 我怀疑这会解决您的问题。 If not, well, worth a shot! 如果没有,那么值得一试! .. ..
Hth.. Hth ..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.