选定的下拉值未显示在 React 的按钮中答案

【问题标题】：Selected dropdown value isn't showing in button in React选定的下拉值未显示在 React 的按钮中
【发布时间】：2018-08-10 11:16:33
【问题描述】：

I have a Bootstrap dropdown and when dropdown item selected I am setting selected item value to dataTypeName using setState and showing it in button to show which item he/she selected.但由于某种原因，它不起作用。

我在componentDidMount() 中生成下拉列表并在处理函数中执行 setState。是不是因为componentDidMount()中生成的按钮，所以没有显示值？

下面是功能

export class GenerateParams extends Component{
    constructor(props){
        super(props);
        this.state = {
            dataTypeName: "Select Type",
            rows: []
        }
    }

    showDataTypeName = (paramName, dataTypeId, dataTypeName) => {
        this.props.handleDataTypes(paramName, dataTypeId, dataTypeName);
        this.setState({
            dataTypeName: dataTypeName
        });
    }

    componentDidMount(){
        let content = this.state.rows.slice();    
        this.props.params.map((d, i) => {
            let dataTypes = [];
            if(typeof this.props.apiPropertiesSuccess != 'undefined' && this.props.apiPropertiesSuccess.size > 0){
                this.props.apiPropertiesSuccess.map((type, i) => {
                    dataTypes.push(<li key={type.get('id')}><a onClick = {() => this.showDataTypeName(d.paramName, type.get('id'), type.get('name'))}> {type.get('name')} </a></li>)
                });
            }
            content.push(<div key={d.paramId}>
                <div className="col-md-6">
                    <TextInput size="medium" id={d.paramId} value={d.paramName} readOnly/>
                </div>
                <div className="col-md-6">
                    <div className="dropdown">
                        <button className="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">{this.state.dataTypeName}
                            <span className="caret"></span>
                        </button>
                        <ul className="dropdown-menu">
                            {dataTypes}
                        </ul>
                    </div>
                </div>
            </div>)
        });

        this.setState({rows:content})
    }

    render(){
        console.log("dataTypeName", this.state.dataTypeName)
        return(
            <div>
                {this.state.rows}
            </div>
        )
    }
}

【问题讨论】：

不要让你的 JSX 处于状态。将数据设置为 state 并从 render 方法中的 state/props 派生 JSX。
我不能在渲染中这样做，因为我的处理函数确实 setState 并且这会导致无限 setState 循环警告。这就是我在 componentDidMount() 中这样做的原因
你永远不应该调用一个直接在渲染中执行setState的函数，但是拥有调用setState的事件处理程序是非常好的，例如onClick={() => this.showDataTypeName( ... )}
同意。但是在这里我根据下拉项列表生成下拉列表，因此事件处理程序处于循环状态并导致 setState 无限问题。我可以使用 componentWillReceiveProps 代替 componentDidMount 吗？

标签： javascript reactjs

【解决方案1】：

它在渲染而不是 componentDidMount 生成下拉列表后工作。

export class GenerateParams extends Component{
    constructor(props){
        super(props);
        this.state = {
            dataTypeName: "Select Type",
            rows: []
        }
    }

    showDataTypeName = (paramName, dataTypeId, dataTypeName) => {
        this.props.handleDataTypes(paramName, dataTypeId, dataTypeName);
        this.setState({
            dataTypeName: dataTypeName
        });
    }

    render(){
        let content = this.state.rows.slice();    
        this.props.params.map((d, i) => {
            let dataTypes = [];
            if(typeof this.props.apiPropertiesSuccess != 'undefined' && this.props.apiPropertiesSuccess.size > 0){
                this.props.apiPropertiesSuccess.map((type, i) => {
                    dataTypes.push(<li key={type.get('id')}><a onClick = {() => this.showDataTypeName(d.paramName, type.get('id'), type.get('name'))}> {type.get('name')} </a></li>)
                });
            }
            content.push(<div key={d.paramId}>
                <div className="col-md-6">
                    <TextInput size="medium" id={d.paramId} value={d.paramName} readOnly/>
                </div>
                <div className="col-md-6">
                    <div className="dropdown">
                        <button className="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">{this.state.dataTypeName}
                            <span className="caret"></span>
                        </button>
                        <ul className="dropdown-menu">
                            {dataTypes}
                        </ul>
                    </div>
                </div>
            </div>)
        });
        return(
            <div>
                {content}
            </div>
        )
    }
}

【讨论】：