在空的输入字段ReactJS上显示错误

Question

我正在尝试基于两个文本输入字段中是否都存在任何字符来启用/禁用表单按钮，但是由于某种原因，状态长度在我的条件下呈现了错误，尽管我登录状态时却显示了错误。

错误：

const isEnabled = this.state.subject.length > 0 && this.state.emails.length > 0; 

//Uncaught TypeError: Cannot read property 'length' of undefined

完整代码：

import React from 'react';

export default class EmailAnnotationForm extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            csrf: '',

            subject: '',

            emails: '',

            comment: ''

        }

        this.handleInputChange = this.handleInputChange.bind(this);

        this.handleFormSubmit = this.handleFormSubmit.bind(this);

        this.handleClearForm = this.handleClearForm.bind(this);

        this.input = React.createRef();

    }

    componentDidMount() {

        console.log(this.state.subject.length) // renders correct value => 0

        this.setState({subject: this.props.title });

    }

    handleInputChange(event) {

        const target = event.target;

        const value = target.type === 'checkbox' ? target.checked : target.value;

        const name = target.name;

        this.setState({

            [name]: value

        });

    }

    handleClearForm() {

        this.setState({

            csrf: '',

            subject: '',

            emails: '',

            comment: ''

        })

    }

    handleFormSubmit(event) {

        var emailSubject;  

        {

            this.state.subject ? emailSubject = this.state.subject : emailSubject = this.props.title

        }; //

        const body = {

            subject: emailSubject,

            emails: this.state.emails,

            comment: this.state.comment

        };

Answer 1

看来this.props.title是不确定的。要解决此问题，请检查this.props.title值，并仅在其具有有效值时更新状态。像这样：componentDidMount() {  if(this.props.title)    this.setState({ subject: this.props.title });}建议：不用subject在didMount方法中使用props值进行更新，而是在构造函数本身中执行此操作，如下所示：this.state = {  csrf: '',  subject: props.title || '',  emails: '',  comment: ''}