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没有重新渲染，控制台日志错误是＆＃34;无法读取属性＆＃39; list＆＃39;未定义＆＃34; 在将表单移到演示文件文件之前，它工作正常。这是对我的训练，我很想知道发生了什么

Answer 1

Zones Component中的函数submitZone没有得到＆＃34;这个＆＃34;绑定。所以它给了＆＃34; this.state＆＃34;如未定义。绑定＆＃34;这个＆＃34;与

相同

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

所以更换一行

<CreateZone onCreate={this.submitZone} />

带

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

在componentDidMount中设置后，React State未定义

1 个答案: