![](/img/trans.png)
[英]Objects are not valid as a React child (found: [object Promise])
[英]Redux: Objects are not valid as a React child (found: [object Promise])
我正在使用 react redux 和 axios 制作此应用程序,其中一个组件显示完整的地址列表,下一个组件显示一个选定的地址。 地址列表组件工作正常,但返回以下错误的单一视图组件有问题:
在涉及 changeSelected->address 的 redux 链中的某处,发送了 promise 而不是承诺的结果。 我很难确定这一点,因为我对多地址视图 fetchAddresses -> addresses 使用了类似的结构,效果很好。
这是我的反应组件
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
}
}
响应正在发送到减速器,但在返回 promise 之前调用了错误消息。
原来问题是将我的反应组件(Card)指定为“异步”。 摆脱了它,它工作正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.