如何使用 Object.assign() 来创建我想要的状态对象

Question

我正在使用 Redux 创建一个简单的联系人应用程序。我的状态对象如下所示：

{
  "contacts": [
    {
      "name": "Miguel Camilo",
      "phone": "123456789"
    },
    {
      "name": "Peter",
      "phone": "883292300348"
    },
    {
      "name": "Jessica",
      "phone": "8743847638473"
    },
    {
      "name": "Michael",
      "phone": "0988765553"
    }
  ],
  "activeContact": {
    "name": "Peter",
    "phone": "883292300348"
  }
}

我正在创建一个添加联系人的操作。我想在包含来自页面输入字段的名称和数字的状态内向contacts 数组添加一个新对象。我正在使用Object.assign() 来尝试执行此操作，但我收到了一个错误bundle.js:22875 Uncaught TypeError: Cannot convert undefined or null to object，我相信这是因为我在减速器中使用了Object.assign()。这是我的减速器代码：

export default function (state = {}, action) {
  switch (action.type) {
    case 'ADD_CONTACT':
      return Object.assign({}, state, {
      contacts: state.concat([
        {
          name: action.payload.name,
          phone: action.payload.phone
        }
      ])
    })
    default:
      return state;
    }
}

所以如果action.payload.name 是“Jeff”并且action.payload.phone 是“5647876578”，我希望返回的状态如下所示：

{
  "contacts": [
    {
      "name": "Miguel Camilo",
      "phone": "123456789"
    },
    {
      "name": "Peter",
      "phone": "883292300348"
    },
    {
      "name": "Jessica",
      "phone": "8743847638473"
    },
    {
      "name": "Michael",
      "phone": "0988765553"
    },
    {
      "name": "Jeff",
      "phone": "5647876578"
    }
  ],
  "activeContact": {
    "name": "Peter",
    "phone": "883292300348"
  }
}

我在使用 Object.assign() 时似乎找不到问题，但我很确定这是我的错误的来源。任何帮助表示赞赏！

编辑：reducer 中的记录状态返回以下内容：

[
  {
    "name": "Miguel Camilo",
    "phone": "123456789"
  },
  {
    "name": "Peter",
    "phone": "883292300348"
  },
  {
    "name": "Jessica",
    "phone": "8743847638473"
  },
  {
    "name": "Michael",
    "phone": "0988765553"
  }
]

我的联系人列表组件：

class ContactList extends Component {
  renderList() {
    return this.props.contacts.map((contact) => {
      return (
        <li
          key={contact.phone}
          onClick={() => this.props.selectContact(contact)}
          className='list-group-item'>{contact.name}</li>
      );
    });
  }
  render() {
    return (
      <ul className = 'list-group col-sm-4'>
        {this.renderList()}
      </ul>
    );
  }
}

function mapStateToProps(state) {
  return {
    contacts: state.contacts
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ selectContact: selectContact }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(ContactList)

我的 ActiveContact 状态部分在它的减速器中被这样修改：

export default function (state = null, action) {
  switch (action.type) {
    case 'CONTACT_SELECTED':
      return action.payload
  }
  return state;
 }

Answer 1

您收到此错误的原因是您的初始状态没有contacts 数组：

export default function (state = {}, action) {
...
}

尝试修改您的状态，使其最初有一个空的联系人数组，如下所示：

export default function (state = { contacts : [] }, action) {
...
}

另外，请考虑修改您的 'ADD_CONTACT' 操作以使用 Array#concat，如下所示：

case 'ADD_CONTACT':
  return Object.assign({}, state, {
    contacts: state.contacts.concat([
      {
        name: action.payload.name,
        phone: action.payload.phone
      }
    ])
  })