在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

React不会重新呈现，并且控制台日志错误是“无法读取未定义的属性'列表'”在将表单移入演示文件之前，它工作正常。 这是对我的培训，我很想了解发生了什么

Answer 1

区域组件中的功能SubmitZone未绑定“ this”。 因此，它给出的“ this.state”是未定义的。 绑定“ this”与

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

所以更换线

<CreateZone onCreate={this.submitZone} />

同

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