エラーがあるレデューサーの還元状態を更新するオブジェクトがリアクションの子として有効でない

Question

私はグーグルと読書を理解していないので、 。今、私が変更した場合

Error: Objects are not valid as a React child (found: object with keys {w}) 

（ないコンポーネントとレンダリングに）

return { ...state, addedwords: [...state.addedwords, {w:action.payload.w}]}; 

を、私は "減速中" のエラーが表示されます。単純に、減速中

dispatch({ type: ENG_ARR_UPDATE, payload: {w,q,a,i}}); 

を：私のアクションが可能コード：

return { ...state, addedwords: [...state.addedwords, JSON.stringify(action.payload)]}; 

いいえm鉱石はエラーを受け取りますが、それは文字列であるので、私は自分のオブジェクトを扱うことができません！

ここでわからないことはありますか？

編集
状態のデモの使用量は次のとおりです。

<p>Update received: {this.props.waddedok}</p> 

部品コード：

class EngCRUD extends React.Component { 
    submit = (wordobj) => { 
     if(wordobj.word && wordobj.quote && wordobj.author){ 
     this.props.saveEngWord(wordobj); 
     this.props.doreset('eng_w_crud_form'); 
     } 
    } 

    render() { 
    return(
     <div> 
    <Link to="/">Home</Link> 
     <p>TCRUD page for EN-W</p> 
     <p>Update received: {this.props.waddedok}</p> 
     <WordCrudForm onSubmit={this.submit}/> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { waddedok: state.engWord.addedwords };//English word state 
} 

export default connect(mapStateToProps, actions)(EngCRUD); 

編集2 - 多分問題はどのようにあります私の最初の状態を作りましたか？

import { 
ENG_ARR_UPDATE 
} from '../actions/types'; 

    export default function(state = {addedwords:[]}, action) { 
    switch(action.type) { 
     case ENG_ARR_UPDATE: 
     return { ...state, addedwords: [...state.addedwords, {w:'dummy'}]}; 
    } 

    return state; 
    } 

Answer 1

答えは、私は他の誰かのためにそうかもしれない便利な詳細に記述Andrew Liからです。私は自分のコンポーネントを編集しました。これは私が来た作業デモコードです：

//my_action.js: 
dispatch({ type: ENG_ARR_UPDATE, payload: {w,q,a,i}}); 

//my_reducer.js: 
return { ...state, addedwords: [...state.addedwords, action.payload]}; 

//component code: 
    render() { 
    return(
     <div> 
     <NewllyAddedWordList warr={this.props.waddedok}/> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { waddedok: state.engWord.addedwords}; 
} 

//NewllyAddedWordList.js 
const NewllyAddedWordList = ({warr}) => (
    <div>{warr.map(map2c)}</div> 
    ); 

function map2c(item, i) { 
    let m = item.w + ", "+item.q; 
    return m; 
} 

export default NewllyAddedWordList;