Question

我正在尝试构建一个简单的Todo应用程序，但是会抛出错误：请有人帮助识别错误吗？

错误

app.min.js：9未捕获的TypeError：无法读取未定义的属性“数据” at Object.value [as addNewContact]（http://localhost:8888/dist/assets/js/app.min.js:9:18059）在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）在Object.h [as executeDispatchesInOrder]（http://localhost:8888/dist/assets/js/app.min.js:3:3241）在l（http://localhost:8888/dist/assets/js/app.min.js:2:30755）在n（http://localhost:8888/dist/assets/js/app.min.js:2:30881） at Array.forEach（native）在c（http://localhost:8888/dist/assets/js/app.min.js:3:6210）在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

首先为了使状态可用于您需要绑定它的函数。您可以为此目的使用fat-arrow功能

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

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

其次：将道具设置为初始状态是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
    });
}

无法识别ReactJs应用程序

1 个答案: