在onClick方法上,我不能两次使用.push

时间:2018-05-01 20:34:40

标签: reactjs state helpers

我正在尝试浏览员工列表,当我点击一个按钮时,它会在阵列中添加员工ID。我尝试使用.push方法在数组上执行此操作,但它只能运行一次,然后当我尝试按下下一个员工的按钮时,它说.push不是函数。

constructor(props:any){
    super(props);
    this.state={
        employees:[{name: 'joe', id: 12345},{name: 'kelly', id: 12321},{name: 'Jessica', id: 12255},{name: 'Paul', id: 98798}],
        ids:[],
        badgeID: '',
        currentEmployee: null
    }
}


check = () => {
    const {ids, badgeID, employees} = this.state

    let filteredEmployee = employees.filter(employee => {
        return employee.id === Number(badgeID)
    })

    this.setState({
        currentEmployee: filteredEmployee,
        drinkModal: true,
        ids: ids.push(badgeID)
    })
    console.log('ids', this.state.ids)
}


handleChange = (e: any, type: string) => {
    if(type === 'badge'){
        this.setState({badgeID: e.target.value})
    }
}

render(){
    return(
        <TextField onChange={e => this.handleChange(e, 'badge')}/>
        <Button onClick={this.check}>Add Employee</Button>
)}

2 个答案:

答案 0 :(得分:0)

你在做:

it('should doSomething', function() {
  spyOn(customService, 'confirm').and.returnValue(Promise.resolve(true));
  spyOn(customService, 'openSomething').and.returnValue(Promise.resolve({data: 'something'}));
  spyOn(customService, 'doneSomething').and.returnValue(Promise.resolve());
  
  functionToTest().then(function() {
    expect(customService.confirm).toHaveBeenCalled();
    expect(customService.openSomething).toHaveBeenCalled();
    expect(customService.doneSomething).toHaveBeenCalled();
  });  
});

这样可以保存不是数组的ids: ids.push(badgeID) 方法的返回值,因此下次调用push时它会失败。相反,你需要做类似的事情:

push

或:

ids: [...ids, badgeID]

答案 1 :(得分:0)

这是因为ids.push返回新数组的长度: check the docs

基本上,您将ids设置为整数值。