reactjs - 调用 reducer 后状态不更新(react-native)
问题描述
这是一个非常基本的应用程序,用于从 github api 列出用户的存储库。我的控制台日志正在减速器内部被调用,所以我知道它被击中了,但是我的新状态永远不会被传递来更新组件道具。
我是 react-native 的新手,但使用 React 和 redux 已经有一段时间了。我认为这是一个反应原生的特定问题,但对于我的生活,我无法弄清楚为什么我的道具没有更新。
此外,可能需要注意的是,如果我在 create-react-app 中运行相同的代码(我的操作、reducer、store、connect 和映射函数),它会按预期工作。它像往常一样发出请求并返回新状态。
任何建议将不胜感激。
动作.js
import Axios from 'axios';
export const REQUEST_POSTS = 'REQUEST_POSTS';
export const RECEIVE_POSTS = 'RECEIVE_POSTS';
export const requestPosts = () => ({
type: REQUEST_POSTS,
});
export const receivedPosts = json => ({
type: RECEIVE_POSTS,
payload: json,
});
export function getData() {
return (dispatch) => {
dispatch(requestPosts());
return Axios('https://api.github.com/users/angular/repos')
.then(
response => response.data,
error => console.log('An error occurred.', error),
)
.then((json) => {
dispatch(receivedPosts(json));
});
};
}
减速器.js
const initialState = {
loading: false,
repos: [],
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case REQUEST_POSTS:
console.log('REQUEST_POSTS');
return { ...state, loading: true };
case RECEIVE_POSTS:
console.log('RECIEVE_POSTS');
return {
...state, repos: action.payload.data, loading: false,
};
default:
return { ...state };
}
};
export default reducer;
RepoList.js
import { Text } from 'react-native';
import styled from 'styled-components/native';
import { connect } from 'react-redux';
import { getData } from '../../actions';
const Container = styled.View`
padding: 16px;
margin-top: 50px;
flex: 1;
align-items: center;
`;
const H1 = styled.Text`
font-weight: bold;
font-size: 40px;
`;
class RepoList extends Component {
componentDidMount() {
console.log('component did mount');
this.props.getData();
}
render() {
console.log('PROPS:', this.props);
const myList = this.props.repos.map(repo => <Text key={repo.id}>{repo.name}</Text>);
return (
<Container>
<H1>REPOS</H1>
{
this.props.loading
&& <H1>Loading...</H1>
}
{myList}
</Container>
);
}
}
const mapStateToProps = (state) => {
return {
repos: state.repos,
loading: state.loading,
};
};
const mapDispatchToProps = {
getData,
};
export default connect(mapStateToProps, mapDispatchToProps)(RepoList);
应用程序.js
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import styled from 'styled-components/native';
import reducer from './src/reducers';
import RepoList from './src/components/RepoList';
const store = createStore(
reducer,
applyMiddleware(thunk),
);
const Wrapper = styled.View`
flex: 1;
align-items: center;
justify-content: center;
background-color: lightblue;
`;
export default class App extends Component {
render() {
return (
<Provider store={store}>
<Wrapper>
<RepoList />
</Wrapper>
</Provider>
);
}
}
解决方案
您是否在组件中将 respos 视为“未定义”?如果是,那么在减速器中 action.payload 应该返回而不是 action.payload.data
case "RECEIVE_POSTS":
console.log("RECIEVE_POSTS");
return {
...state,
repos: action.payload.data,
loading: false
};
推荐阅读
- powershell - Powershell 中选择对象的更高效替代方案
- android - algolia kotlin 客户端无法在 android 中运行
- java - 短信验证码请求失败:未知状态码:17020 null
- html - HTML5 输入日期,最大不工作 Firefox
- java - 在视图寻呼机中滑动一定次数后显示插页式广告
- c++ - 给一个任意容器,推导出一个相关类型的容器类型
- reactjs - 是否可以将 Capacitor 集成到在单水疗中心(微前端架构)上运行的项目中?
- javascript - 从另一个文件添加到数组 - node.js
- flutter - 如何在轮播滑块的每张幻灯片上添加按钮
- go - Go 有没有办法用一个“go build”命令构建多个可执行文件?(和 Rust 一样)?