ReactJS Uncaught TypeError : 정의되지 않은 'concat'속성을 읽을 수 없습니다.

Question

제출 버튼을 누를 때마다 상태에 요소를 추가하려고합니다. 문제는 제출 버튼을 누를 때마다

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을 넣었고 그들은 모두 올바른 값을 반환합니다. 여하튼 그것이 연결하려고 할 때 JS는 그것이 undefined 가치 다라고 말한다. 요소를 rooms 상태로 연결하려면 어떻게해야합니까?

Answer 1

이 라인은 :

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

당신은 어디 notes를 정의하지 않은 따라서는 undefined에 concat을 할 수 없다고 말하고있다.