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

如何使用Object.assign（）随意创建此状态对象

1 个答案: