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。