Question

我的程序是修改表。

我想用我的对象的值nom填充标签： （nom：{id：“ 1”，nom：“ ENV”}）

所以我输入了 this.state = {nom：''}

我用函数填充它：

componentDidMount() {
    this.setState(() => ({ nom: this.props.store.environnements.find (p => p.id == this.props.environnement.match.params.id) }));
}

在我的render（）函数中，我输入了值= {this.state.nom.nom} 我的页面在输入中正确显示了名称。

但是当我刷新时，控制台中出现错误：

“未捕获的TypeError：无法读取未定义的属性'nom' 在EditEnvironnementForm.render”

您能帮我解决这个问题吗？谢谢！

import React from 'react';
import { connect } from 'react-redux';

export class EditEnvironnementForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            nom: '',
            error: ''
        };
        this.onNomChange = this.onNomChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onNomChange(e) {
        const nom = e.target.value;
        console.log(nom)
        this.setState(() => ({ nom: nom }));
    }

    onSubmit(e) {
        e.preventDefault();

        if (!this.state.nom) {
            this.setState(() => ({ error: 'Please set environnement!' }));
        } else {
            this.setState(() => ({ error: '' }));
            this.props.onSubmitEnvironnement(
                {
                    nom: this.state.nom,
                }
            );
        }
    }

    componentDidMount() {
        this.setState(() => ({ nom: this.props.store.environnements.find (p => p.id == this.props.environnement.match.params.id) }));
    }

    render() {
        return (
            <div>
                {console.log(this.state.nom)}
                {this.state.error && <p className='error'>{this.state.error}</p>}
                <form onSubmit={this.onSubmit} className='add-book-form'>

                    <input type="text" placeholder="nom" autoFocus
                        value={this.state.nom.nom}
                        onChange={this.onNomChange} />
                    <br />
                    <button>Add Environnement</button>
                </form>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        store: state
    };
};

export default connect(mapStateToProps)(EditEnvironnementForm);

Answer 1

Render生命周期方法在componentDidMount之前执行。

因此，在您的render中：

 <input type="text" placeholder="nom" autoFocus
   value={this.state.nom.nom}
   onChange={this.onNomChange} />
 <br />

this.state.nom等于拳头渲染中的字符串（如在构造函数中分配的字符串）。然后，您将this.state.nom设置为通过componentDidMount进行对象设置，但是第一个渲染已经失败，并且您得到了错误。要绕过它，您必须检查this.state.nom是否是一个对象。像这样：

<input type="text" placeholder="nom" autoFocus
   value={this.state.nom ? this.state.nom.nom : ''}
   onChange={this.onNomChange} 
/>

Answer 2

您不需要，在componentDidMount中使用this.setState并不是一个好习惯，如果您想根据即将来临的道具更新状态，那么您就可以简单地做到这一点。

componentDidUpdate(prevsProp) {
    if (prevsProp.store !== this.props.store){
       this.setState({ nom: this.props.store.environnements.find (p => p.id == this.props.environnement.match.params.id) });
    }
}

在渲染方法中，您需要这样做。

<input type="text" placeholder="nom" autoFocus
   value={this.state.nom || ''}
   onChange={this.onNomChange} 
/>

有关更多信息，请参见链接 https://reactjs.org/docs/react-component.html

无法读取未定义的属性-RENDER（输入）

2 个答案: