javascript - Redux:对象作为 React 子级无效(发现:[object Promise])
问题描述
我正在使用 react、redux 和 axios 制作这个应用程序,其中一个组件显示完整的地址列表,下一个组件显示一个选定的地址。地址列表组件工作正常,但单视图组件有问题,返回以下错误:
在涉及 changeSelected->address 的 redux 链中的某个地方发送了一个承诺,而不是承诺的结果。我很难确定这一点,因为我为多地址视图 fetchAddresses -> 地址使用了类似的结构,效果很好。
这是我的反应组件
const Card = async (props) => {
const { changeSelected,address } = props
console.log(address)
useEffect(() => {
changeSelected(1);
},[changeSelected(1)])
if (!address){
return <h1>No results</h1>
} else {
return (
<React.Fragment>
<CssBaseline />
<Container maxWidth="sm">
<Typography component="div" style={{ backgroundColor: '#cfe8fc', height: '100vh' }} >
<Typography variant="h6" >{address.body}</Typography>
</Typography>
</Container>
</React.Fragment>
);
}
}
Card.propTypes = {
changeSelected: PropTypes.func.isRequired,
address: PropTypes.object.isRequired,
}
const mapStateToProps = state => ({
address: state.address.address,
})
export default connect(mapStateToProps, {changeSelected})(Card)
这是我派出的行动
export const changeSelected = (postData) => dispatch => {
console.log(postData)
axios.get(`https://jsonplaceholder.typicode.com/posts/${postData}`)
.then(addresses => {
console.log(addresses)
dispatch({
type: CHANGE_SELECTED,
payload: addresses.data
})}).catch(err => {
dispatch({
//if there's an error, send the user a card saying so
type: CHANGE_SELECTED,
payload: [{id:0,nickName:'error',content:'please contact cutomer service at 010-314-1150'}]
})
console.log(err)
})
}
这是我的减速机
//create initial state
const initialState = {
addresses: [],
address:{}
}
export default (state = initialState, action) => {
switch(action.type) {
case FETCH_ADDRESSES:
return{
...state,
addresses: action.payload
}
case CHANGE_SELECTED:
return{
address: action.payload
}
default:
return state
}
}
响应正在发送到减速器,但在返回承诺之前调用了错误消息。
解决方案
事实证明,问题是将我的反应组件(卡)指定为“异步”。摆脱了它,它工作正常。
推荐阅读
- javascript - 使用带有渲染功能的 Vue.js 3 片段
- android - 即使应用程序关闭,如何保持广播接收器注册?
- python - 滚动直到屏幕上出现按钮
- c++ - 构造函数中的 C++ 枚举?
- javascript - 如果位置和长度未知/可变,如何替换字符串?
- javascript - 从 msal 2.0 令牌获取 UPN 和电子邮件地址
- python-3.x - Pandas 将月份名称转换为日期
- java - 具有模块化应用程序困难的 Jpackage 创建安装程序
- vue.js - 在页面中显示食谱
- javascript - addEventListener 是否适用于按标签名称获取元素?