我如何使用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"
  }
]

我的ContactsList組件：

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部分正在其reducer中進行如下修改：

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
      }
    ])
  })