在具有错误的减速器中更新 redux 状态对象作为 React 子对象无效答案

【问题标题】：updating redux state in reducer having error Objects are not valid as a React child在具有错误的减速器中更新 redux 状态对象作为 React 子对象无效
【发布时间】：2017-08-24 00:58:12
【问题描述】：

经过数小时的谷歌搜索和阅读 SOF 后，我无法理解为什么 react 不允许我更新 redux 状态，而只是将新对象推送到数组中。我的行动使：

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

在 reducer 中，简单地说：

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

我在“reducer”中得到错误（不在组件和渲染中）

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

现在如果我将代码更改为：

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

我不再收到错误，但我无法使用我的对象，因为它是一个字符串！

请问这里有什么不明白的地方？

编辑
状态的demo用法是：

<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;
  }

【问题讨论】：

我们可以看看你是如何在组件中使用这部分状态的吗？
是的，我编辑并添加了代码。
还添加了reducer文件，因为我真的无法怀疑简单演示组件中的任何内容，也许我的reducer有问题，我怀疑定义初始值有一些我不明白的地方状态。请看。
我理解这个问题。由于您有一个处于状态 (state.engWord.addedwords) 的数组，React 正在尝试渲染数组的所有元素，如果它们都是字符串，那么它们将只是文本节点。但是由于你在数组中添加了一个对象，React 会吐出错误。映射数组。

标签： reactjs redux state

【解决方案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;

【讨论】：