为什么我得到`this.state.expenseItems.map不是函数`？

Question

这就是我所拥有的：

在AddExpenseForm组件中：

一些示例数据：

  constructor(){
    super();
    this.state = {
      expenseItems: [{
          uid: '222',
          date: '10-10-2017',
          desc: 'desc1',
          amount: 'amount1'
        },{
          uid: '333',
          date: '01-09-2017',
          desc: 'desc1',
          amount: 'amount1'
        },{
          uid: '444',
          date: '06-05-2017',
          desc: 'desc1',
          amount: 'amount1'
        }
      ]
    }
  }

我的addItem函数：

addItem = (item) => {
  const currentState = {...this.state.expenseItems};
  const expenseItems = {currentState, ...item};
  this.setState({expenseItems});
}

然后我通过addItem={this.addItem}

将其传递给AddItemForm

在AddItemForm组件中：

我的onSubmit：

<Form onSubmit={(e) => this.createItem(e)}>

然后是createItem函数：

  createItem(event) {
    event.preventDefault();
    this.props.addItem({
      uid: Date.now(),
      date: this.state.date,
      desc: this.state.desc,
      amount: this.state.amount
    });
  }

我正在遍历expenseItems示例数据并且显示正常但是当我尝试添加新对象（项目）时，我收到了该错误：this.state.expenseItems.map is not a function

我想我在addItem中做错了？

Answer 1

您使用rest / spread 运算符对于您尝试执行的操作并不正确。试试这个：

addItem = (item) => {
  const expenseItems = [...this.state.expenseItems, item];
  this.setState({expenseItems});
}

修改：作为参考，链接到Spread operator syntax