Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/user-interface/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs “反应”下拉列表-将选定值关闭一次_Reactjs_User Interface_State_Dropdown - Fatal编程技术网

Reactjs “反应”下拉列表-将选定值关闭一次

Reactjs “反应”下拉列表-将选定值关闭一次,reactjs,user-interface,state,dropdown,Reactjs,User Interface,State,Dropdown,我在React中有一个下拉列表,其中填充了来自api的数据,效果很好。然而,当我在下拉列表中选择一个选项并记录结果时,它记录的结果总是显示在我选择的项目上方1处的项目。在我第一次选择时它也显示为空白,但之后每次选择时,它都会按1关闭。有人看到我遗漏了什么吗 import React, { Component } from 'react'; import { Editor } from '@tinymce/tinymce-react'; class TinyEditor extends Com

我在React中有一个下拉列表,其中填充了来自api的数据,效果很好。然而,当我在下拉列表中选择一个选项并记录结果时,它记录的结果总是显示在我选择的项目上方1处的项目。在我第一次选择时它也显示为空白,但之后每次选择时,它都会按1关闭。有人看到我遗漏了什么吗

import React, { Component } from 'react';
import { Editor } from '@tinymce/tinymce-react';


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

        this.state = { 
            content: '',
            policy: '',
            policies: []
         };

        this.selectPolicy = this.selectPolicy.bind(this);

    }

    componentDidMount() {
        console.log(`Component did mount`);
        fetch(`/api/policy/all`)
            .then(res => res.json())
            .then((result) => {
                console.log(result);
                this.setState({policies: result});
            });
    }


    selectPolicy(e) {
        this.setState({policy: e.target.value});
        console.log(this.state.policy);
    }

    render() {
                return (
            <div>
                <div className="container">

                    <select onChange={this.selectPolicy}
                            value={this.state.policy}>
                        <option default>Select Policy...</option>
                        { this.state.policies.map(item => (
                            <option key={item.policy}>{item.policy}</option>
                        ))}
                    </select>

                </div>
            </div>
        )
    }
}

export default TinyEditor;
import React,{Component}来自'React';
从'@tinymce/tinymce-react'导入{Editor};
类TinyEdit扩展组件{
建造师(道具){
超级(道具);
this.state={
内容:“”,
策略:“”,
政策:[]
};
this.selectPolicy=this.selectPolicy.bind(this);
}
componentDidMount(){
log(`Component-did-mount`);
获取(`/api/policy/all`)
.then(res=>res.json())
。然后((结果)=>{
控制台日志(结果);
this.setState({policies:result});
});
}
选择策略(e){
this.setState({policy:e.target.value});
log(this.state.policy);
}
render(){
返回(
选择策略。。。
{this.state.policies.map(项=>(
{item.policy}
))}
)
}
}
导出默认TinyEditor;

您的控制台在完成设置状态之前被渲染, 请尝试以下代码

this.setState({policy:e.target.value},()=>console.log(this.state.policy)}

这里,只有在完成setState之后才会调用console.log()