ReactJS Uncaught TypeError：无法读取未定义的属性'concat'

Question

我想在每次按下Submit按钮时将元素添加到状态。问题是，每当我按下提交按钮，它会返回

Uncaught TypeError: Cannot read property 'concat' of undefined错误，我不明白为什么它是未定义的。

class ChatRoom extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     rooms: ['room1', 'room2'], 
     chatRoom: '' 
    } 
    } 

    handleAddRoom = (e) => { 
    console.log('handleAddRoom', e); 
    this.setState({ 
     rooms: this.state.notes.concat(e) 
    }) 
    } 
    handleSubmit(){ 
    var newRoom = ReactDOM.findDOMNode(this.refs.room).value; 
    console.log(newRoom); 
    ReactDOM.findDOMNode(this.refs.room).value = ''; 
    this.handleAddRoom(newRoom); 
    } 
    render(){ 
    console.log("rooms: ", this.state.rooms) 
    return(
     <div> 
     Hello from chat room!! Please enter new room: 

     <input type="text" className="form-control" placeholder="Add a new note" ref="room" /> 
     <span className="input-group-btn"> 
      <button className="btn btn-default" type="button" onClick={this.handleSubmit.bind(this)}>Submit</button> 
     </span> 
     </div> 
    ) 
    } 
} 

这是给我的问题的组件。我把console log放在不同的位置，他们都返回正确的值。不知何故，当它试图concat JS说它是undefined值。如何将元素连接成rooms状态？

Answer 1

这一行：

rooms: this.state.notes.concat(e)

您还没有定义任何地方notes，因此它是说，它不能undefined做concat。