javascript - 如何使用 Redux 和 React 从数据库中获取单个数据元素?
问题描述
我是 React 和 Redux 的新手,目前正在尝试使用故事 ID 从我的数据库中获取单个故事(ID、标题、内容、音频)。我已经设置了组件、动作和减速器。
但是我遇到了以下错误,发生在组件中:
无法读取未定义的属性“then”
getStory(id) {
> 31 | this.props.getSingleStory(id)
| ^ 32 | .then(response => {
33 | this.setState({
34 | story: response.data
故事细节组件
import {getSingleStory } from '../../actions/story';
....
export class StoryDetails extends Component {
constructor(props) {
super(props);
this.getStory = this.getStory.bind(this);
this.state = {
story: {
id: null,
title: "",
content: "",
audio: ""
}
};
}
componentDidMount() {
this.getStory(this.props.match.params.id);
}
getStory(id) {
this.props.getSingleStory(id)
.then(response => {
this.setState({
story: response.data
});
console.log(response.data);
})
.catch(e => {
console.log(e);
});
}
render() {
const { story } = this.state;
return (
<Fragment>
<h2>Stories</h2>
{story.title}
{story.content}
</Fragment>
);
}
}
const mapStateToProps = state => ({
story: state.story.story
});
export default connect(
mapStateToProps,
{ getSingleStory}
)(StoryDetails);
动作(动作在类型中注册)
// GET SINGLE STORY
export const getSingleStory = id => (dispatch, getState) => {
axios
.get( apiBase + `/story/${id}/`, tokenConfig(getState))
.then(res => {
dispatch({
type: GET_SINGLE_STORY,
payload: res.data
});
})
.catch(err =>
dispatch(returnErrors(err.response.data, err.response.status))
);
};
减速器
case GET_SINGLE_STORY:
return {
...state,
story: state.story.filter(story => story.id !== action.payload)
};
据我所见,我的 GET_SINGLE_STORY 操作返回“res.data”。所以我不知道为什么'then'是未定义的。
感谢您的任何提示!
解决方案
你应该在你的 getSingleStory 中返回一个承诺(你什么都不返回)
export const getSingleStory = id => (dispatch, getState) => {
return new Promise((resolve, reject) => {
axios.get( apiBase + `/story/${id}/`, tokenConfig(getState))
.then(res => {
dispatch({
type: GET_SINGLE_STORY,
payload: res.data
});
resolve(res);
})
.catch(err => {
dispatch(returnErrors(err.response.data, err.response.status));
reject(err);
});
});
};
推荐阅读
- node.js - 如何进入 Alexa Skills 中的下一个功能
- javascript - 单击后如何更改 li 元素的背景?
- javascript - 当多个变量同时调用同一个函数时,谷歌脚本计算错误
- javascript - 尝试使用组件时未定义不是对象错误
- python - Python:从 'vintagecar' 到 'vintage car' 使用谷歌功能('did you mean' feature)
- python - 在pytest中模拟redis连接
- resultset - Maximo Spatial:通过自动化脚本访问结果窗口中的功能列表?
- r - R 和 IEEE 754 中的舍入
- javascript - 笑话:模拟 _HOC_ 或 _curried_ 函数
- python - 如何使用 xlwt 锁定特定列