javascript - 在 ReactJs 应用程序中无法识别 this.state.data

Question

我正在尝试构建一个简单的 Todo 应用程序，但是抛出一个错误:请有人帮忙找出错误吗？

错误

app.min.js:9 Uncaught TypeError: Cannot read property 'data' of undefined at Object.value [as addNewContact] (http://localhost:8888/dist/assets/js/app.min.js:9:18059) at b.value (http://localhost:8888/dist/assets/js/app.min.js:9:19043) at Object.f.invokeGuardedCallback (http://localhost:8888/dist/assets/js/app.min.js:3:5790) at g (http://localhost:8888/dist/assets/js/app.min.js:3:3021) at Object.h [as executeDispatchesInOrder] (http://localhost:8888/dist/assets/js/app.min.js:3:3241) at l (http://localhost:8888/dist/assets/js/app.min.js:2:30755) at n (http://localhost:8888/dist/assets/js/app.min.js:2:30881) at Array.forEach (native) at c (http://localhost:8888/dist/assets/js/app.min.js:3:6210) at Object.processEventQueue (http://localhost:8888/dist/assets/js/app.min.js:2:31947

代码:

import React from 'react';
import ReactDOM from 'react-dom';


export class ContactsListApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data
        }
    }
    addContact(newContactObj) {
        console.log(newContactObj);
        var tmpStateData = this.state.data;
        tmpStateData.push(newContactObj.value);

        this.setState({
            data: tmpStateData
        });
    }
    render() {
        return (
            <div className="contact-list">
                <div className="container">
                    <div className="row">
                        <div className="col-xs-12 col-sm-12 col-md-12">
                            <AddContactPanel addNewContact={this.addContact} />
                            <ContactList contacts={this.state.data} />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

class ContactList extends React.Component {
    render() {
        var items = Array.prototype.map.call(this.props.contacts, function (contact, index) {
            return <ContactItem name={contact.name} key={index} />
        });

        return (
            <ul>{items}</ul>
        )
    }
}

class AddContactPanel extends React.Component {
    constructor(props) {
        super(props);
    }
    handleAddContact() {
        var contactItem = this.refs.newContactName;
        this.props.addNewContact({
            "_id": (Math.random(1000 * 10) + 1),
            "name": this.refs.newContactName.value,
            "occupation": "myJob",
            "email": "me@hotmail.com",
            "telephone": "0123456789"
        }); 
    }
    render() {
        return (
            <div className="row">
                <form>
                    <input required ref="newContactName" type="text" name="newContactName" />
                    <input type="submit" name="submit" onClick={this.handleAddContact.bind(this)} />
                </form>
            </div>
        )
    }
}


class ContactItem extends React.Component {
    render() {
        return (
            <li>{this.props.name}</li>
        )
    }
}


module.exports = {
    contactListApp: ContactsListApp
}

提前致谢!

Answer 1

首先为了使状态可用于您需要绑定(bind)它的函数。您可以使用 fat-arrow 函数来实现此目的

addContact(newContactObj) {
        console.log(newContactObj);
        var tmpStateData = this.state.data;
        tmpStateData.push(newContactObj.value);

        this.setState({
            data: tmpStateData
        });
    }

其次:将 props 设置为初始状态是一种反模式，如 react docs 所建议的那样。你应该避免这样使用它。相反，您可以在 componentDidMount 函数中将状态设置为 prop 值，例如

constructor(props) {
    super(props);
    this.state = {
        data: ''
    }
}
componentDidMount() {
    this.setState({data: this.props.data})
}
addContact = (newContactObj) => {
    console.log(newContactObj);
    var tmpStateData = this.state.data;
    tmpStateData.push(newContactObj.value);

    this.setState({
        data: tmpStateData
    });
}