Redux：對象作為 React 子項無效（找到：[object Promise]）

Question

我正在使用 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 之前調用了錯誤消息。

Answer 1

原來問題是將我的反應組件（Card）指定為“異步”。 擺脫了它，它工作正常。