React 下拉列表 - 所选值减一

Question

我在 React 中有一个下拉列表，其中填充了我的 api 中的数据，效果很好。但是，当我 select 下拉列表中的一个选项并记录结果时，它记录的结果总是显示比我 select 编辑的项目高 1 位的项目。它在我第一次 select 时也显示为空白，但之后每 select，都显示为空白。有人看到我遗漏了什么吗？

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;

Answer 1

您的控制台在完成 setSstate 之前就已呈现，试试下面的代码

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

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

React 下拉列表 - 所选值减一

React Dropdown List - Selected Values Off By One

user-interface

state

reactjs

dropdown