TypeError: undefined 不是函数(评估 userItems.map)

Question

编辑：现在我正在使用"react-native-navigation@latest"一切都很好。

当我第一次打开应用程序时，它正在正确处理数据，但在第二次刷新后发生错误

TypeError： undefined 不是函数(评估 'userItems.map'(

此错误位于：在用户(
由连接(用户(创建(中;
....

....

组件/用户.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
})
);
};
}

减速器/用户减速器.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;

减速器/索引器.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"
},

Answer 1

你确定你在MapDispatchToProps中映射你的操作吗？(理想情况下，这篇文章将是一个评论，但我还没有评论权限(。

const mapDispatchToProps = (dispatch) => {
return {
fetchUsers: () => dispatch(fetchUsers());
};    
};

Answer 2

如果/users响应是这样的：

{
"users": [
{
"dateCreated": "..",
"dateModified": "...",
"lastLogin": "...",
"_id": "...",
"email": "...",
"__v": 0
}
]
}

那么在调度FETCH_USERS时，你应该这样做：(注意有效负载属性(

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;
}
}

Answer 3

从给出的代码示例中，您的代码似乎正在使用 react-native-router-flux(将 react-navigation 作为依赖项(。github上列出了一个未解决的问题。正如这个SO答案中所讨论的，当前的解决方案是使用beta26版本+的react-native路由器通量。 我怀疑这将解决您的问题。如果没有，那么，值得一试！

呵呵。。