陣營國家設置後未定義在componentDidMount

Question

這是演示文件：

import React, { Component } from 'react' 

class CreateZone extends Component { 
    constructor(){ 
     super() 
      this.state = { 
       zone: { 
        name: '', 
        zipCodes: [] 
       } 
      } 
    } 

    newZone(event){ 
     let newZone = Object.assign({}, this.state.zone) 
     newZone[event.target.id] = event.target.value 
     this.setState({ 
      zone: newZone 
     }) 
    } 
    submitZone(event){ 
     this.props.onCreate(this.state.zone) 
    } 

    render(){ 
     return(
      <div> 
      <input id="name" onChange={this.newZone.bind(this)} className="form-control" type="text" placeholder="Enter Zone Name" /><br /> 
      <input id="zipCodes" onChange={this.newZone.bind(this)} className="form-control" type="text" placeholder="Enter Zip Code" /><br /> 
      <button onClick={this.submitZone.bind(this)} className="btn btn-danger">Submit Comment</button> 
      </div> 
     ) 
    } 
} 
export default CreateZone 

這是容器文件：

import React, { Component } from 'react' 
import { Zone, CreateZone } from '../presentation' 
import { APImanager } from '../../utils' 

class Zones extends Component { 
    constructor(){ 
     super() 
     this.state = { 
      zone: { 
       name: '', 
       zipCodes: '', 
       numComments: '' 
      }, 
      list: [] 
     } 
    } 

    componentDidMount(){ 
     console.log('componentDidMount') 
     APImanager.get('/api/zone', null, (err, response) => { 
      if(err){ 
       alert('Error in zones: '+err.message) 
       return 
      } 

      this.setState({ 
       list: response.results 
      }) 
     }) 
    } 

    submitZone(zone){ 
     let newZone = Object.assign({}, zone) 

     APImanager.post('/api/zone', newZone, (err, response) => { 
      if(err) { 
       alert('ERROR in New Zone: '+err.message) 
       return 
      } 
      console.log('NewZone: '+JSON.stringify(response)) 
      let updatedList = Object.assign([], this.state.list) 
      updatedList.push(response.result) 
      this.setState({ 
       list: updatedList 
      }) 


     }) 
    } 

    render(){ 

     const listItems = this.state.list.map((zone, i) => { 
      return (
       <li key={i}> 
        <Zone currentZone={zone} /> 
       </li> 
      ) 
     }) 

     return(
      <div> 
       <ol> 
        {listItems} 
       </ol> 
       <div> 
        <CreateZone onCreate={this.submitZone} /> 
       </div> 
      </div> 
     ) 
    } 
} 
export default Zones 

陣營不會重新渲染和控制檯日誌錯誤是「無法讀取屬性未定義的「列表」 在將表單移入演示文稿文件之前它工作正常。這是我的訓練，我很想知道發生了什麼

Answer 1

區域組件中的submitZone函數沒有得到「this」綁定。所以它將「this.state」定義爲undefined。綁定 「這種」 相同

<button onClick={this.submitZone.bind(this)} className="btn btn-danger">Submit Comment</button> 

因此，與

<CreateZone onCreate={this.submitZone.bind(this)} />