Question

我想使用this.state.cityCodeval方法内的this.state.idVal语句检查if和displayName()的值，以便在以下情况下显示return()内的内容：用户输入的值正确。

在我的Webstorm IDE中，我收到一条警告：

Binary operation argument type string is not compatible with type string

这使我相信我正在错误地检查它们的值。

我知道我可以做console.log(this.state.cityCodeval);或console.log(this.state.idVal);，但是我需要检查用户输入是什么。

这是我的代码

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actionType from '../../store/actions/actions';

class SearchArticle extends Component {
    constructor(props) {
        super(props);

        this.state = {
            flag: false,
            idVal: '',
            cityCodeval: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleArticleId = this.handleArticleId.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        console.log("IDValue --> " + this.state.idVal);

        this.props.articleIdValueRedux(this.state.idVal);
        this.setState({flag: true});
    }

    handleChange = event => {
        this.setState({value: event.target.value});
        this.props.cityCodeReducerRedux(event.target.value);
    }

    handleArticleId = event => {
        event.preventDefault();
        this.setState({idVal: event.target.value});
    }

    displayName = () => {
        if(this.state.cityCodeval === 'nyc' && this.state.idVal === '1') {
            return (
                <div>
                    <p>author name: {this.state.authorNameValue}</p>
                    <p>article text: {this.state.storyTextValue}</p>
                </div>
            );
        }
    }

    render() {
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input onChange={this.handleChange} value={this.state.cityCodeValue} type="text" placeholder="city code"/>
                    <input onChange={this.handleArticleId} value={this.state.idVal} placeholder="article id"/>
                    <button type="submit" value="Search">Submit</button>
                    {this.state.flag ? this.displayName() : null}
                </form>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        cityCodeValue: state.cityCodeValue.cityCodeValue,
        authorNameValue: state.authorNameValue.authorNameValue,
        articleIdValue: state.articleIdValue.articleIdValue,
        storyTextValue: state.storyTextValue.storyTextValue
    };
};

const mapDispatchToProps = dispatch => {
    return {
        cityCodeReducerRedux: (value) => dispatch({type: actionType.CITY_CODE_VALUE, value}),
        articleIdValueRedux: (value) => dispatch({type: actionType.ARTICLE_ID_VALUE, value})
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(SearchArticle);

Answer 1

您仍应返回null；作为安全条款，以防您的条件不匹配。

 displayName = () => {
    if(this.state.cityCodeval === 'nyc' && this.state.idVal === '1') {
       console.log(this.state.cityCodeval); // console it here
       console.log(this.state.idVal); // console it here
       return (
         <div>
           <p>author name: {this.state.authorNameValue}</p>
           <p>article text: {this.state.storyTextValue}</p>
         </div>
       );
    }
    return null;
}

现在，在您的渲染方法中，您可以执行此操作。

{this.state.flag && this.displayName()}

这意味着如果flag变量为true，则调用displayName然后执行该函数。如果您的第一个条件匹配，则返回，否则返回null；

以前，在您当前的代码中，如果flag变量为true，并且执行了displayName条件不满足的函数if。这引起了一个错误，因为它什么也没有退回。

如何使用if语句而不是console.log（）检查this.state的值？

1 个答案: