React-redux，減速機無法更新 state，代碼錯誤

Question

我使用帶有鈎子的 React JS 和 redux 制作了一個簡單的計數器代碼，我可以在按鈕點擊時增加/減少計數器。 編譯時出現錯誤Error: Objects are not valid as a React child (found: object with keys {count})。 如果您打算渲染一組子項，請改用數組。

如果我刪除 initialState 並聲明state=0它工作正常，但我怎樣才能成功執行此代碼以保持 initialState？

let initialState ={
    count:0
}
const counter = (state=initialState,action)=>{
    switch(action.type){
        case 'INCREMENT': return {...state,count:state.count+1} ;
        case 'DECREMENT':return {...state,count:state.count-1};
        default: return state
    }
}

export default counter

我使用組件中的代碼，如下所述

    const counter = useSelector(state=>state.counter)
           <h3>{counter}</h3> 
# note : some code parts are removed from this component for reader easiness 

Answer 1

state.counter不是原始值，它是一個 object，您可以將其保存在您的商店中的counter字段下。

您可以 go 更深一層：

const counter = useSelector(state => state.counter.count);

或者直接參考JSX里面的count值：

<h3>{counter.count}</h3> 

Answer 2

它是一個 object 所以你應該像這樣破壞 count 屬性：

const {count } = useSelector(state=>state.counter)
 <h3>{count}</h3>