Javascript setState问题：DOM得到更新，但没有'；无法在UI中得到反映

我有一个组件，组件中有两个下拉列表。在“名称”下拉列表中选择值时，将显示“值”下拉列表

为此，我使用setState。在选择时，状态被更新，组件被渲染，我可以通过render（）中的控制台日志看到状态的变化。DOM添加了另一个下拉列表，这反映在浏览器中。但它在UI中不可见

我使用setState，因为我只想在点击“保存”按钮完成更改后更新存储状态。单击“取消”，组件状态更改将恢复为存储状态，我已将其存储在变量“已选择的详细信息”中

但这些更改都没有反映在UI中（但它们反映在DOM中）

import React，{Component}来自“React”
从“./Dropdown”导入下拉列表
从“./Modal”导入模态
从“react dom”导入{findDOMNode}
让已选择的__详细信息=[]；
类CarInfo扩展组件{
建造师（道具）{
超级（道具）；
此.state={
详情：[]
};
}
组件willmount（）{
this.state.details=this.props.details；
}
componentDidMount（）{
var namelement=findDOMNode（this.refs.nameBox）；
$（namelement）.on（'change'，this.handleSelectChange.bind（this））；
var valueElement=findDOMNode（this.refs.valueBox）；
$（valueElement）.on（'change'，this.handleSelectChange.bind（this））；
}
handleClick（事件）{
this.props.actions.getDetails（）；
this.props.actions.toggleDisplayModal（）；
已选择\u详细信息=this.state.details；
}
handleSelectChange（事件）{
设id=event.target.isd；
设fn=id.split（“”“）[0]；
id=parseInt（id.split（“”“）[1]）；
如果（fn==“名称”）{
让值=event.target.value；
这是我的国家({
详细信息：this.state.details.map（（详细信息，idx）=>{
返回idx==id？Object.assign（{}，detail，{name:value}）：detail；
})
});
}
否则如果（fn==“值”）{
let value=[].filter.call（event.target.options，函数（option）{
返回选项。已选择；
}).map（功能（选项）{
返回选项.value；
});
this.state.details[id].value=value；
这是我的国家({
详细信息：this.state.details
})
}
}
取消选择（）{
这是我的国家({
详细信息：已选择\u详细信息
}, () => {
this.props.actions.toggleDisplayModal（）；
})
}
更新选择（）{
this.props.actions.setDetails（this.state.details）；
this.props.actions.toggleDisplayModal（）；
}
render（）{
返回(
{this.props.details.length==1&&this.props.details[0]。name==“”？“添加”：“编辑”}详细信息
{
这是道具吗？
选择详细信息
{
this.state.details.map（（细节，索引）=>{
日志（索引、detail.name、detail.value）；
返回(
选择名称
{
Object.keys（this.props.attributes.details）.map（（detail\u name）=>{
返回{detail_name}
})
}
{
detail.name！==“”？
选择值
{
detail.name！==“”？
this.props.attributes.details[detail.name].map（（detail\u值）=>{
返回{detail_value}
})
：null
}
：null
}
)
})
}
    import React, { Component } from 'react'
    import Dropdown from './Dropdown'
    import Modal from './Modal'
    import { findDOMNode } from 'react-dom'

    let already_selected_details=[];

    class CarInfo extends Component {

        constructor(props) {
            super(props);
            this.state = {
                details: []
            };
        }
        componentWillMount() {
            this.state.details = this.props.details;
        }
        componentDidMount() {
            var nameElement = findDOMNode(this.refs.nameBox);
            $(nameElement).on('change',this.handleSelectChange.bind(this));
            var valueElement = findDOMNode(this.refs.valueBox);
            $(valueElement).on('change',this.handleSelectChange.bind(this));
        }
        handleClick(event) {
            this.props.actions.getDetails();
            this.props.actions.toggleDisplayModal();
            already_selected_details = this.state.details;
        }
        handleSelectChange(event) {
            let id = event.target.isd;
            let fn = id.split('_')[0];
            id = parseInt(id.split('_')[1]);

            if(fn == "name") {
                let value = event.target.value;
                this.setState({
                    details: this.state.details.map((detail, idx) => {
                        return idx==id ? Object.assign({}, detail, {name: value}) : detail;
                    })
                });
            }
            else if(fn =="value") {
                let value = [].filter.call(event.target.options, function (option) {
                    return option.selected;
                }).map(function (option) {
                    return option.value;
                });
                this.state.details[id].value = value;
                this.setState({
                    details: this.state.details
                })
            }
        }
        cancelSelection() {
            this.setState({
                details: already_selected_details
            }, () => {
                this.props.actions.toggleDisplayModal();
            })
        }
        updateSelection() {
            this.props.actions.setDetails(this.state.details);
            this.props.actions.toggleDisplayModal();
        }

        render() {

            return (
                <div className="row">
                <a className="clickable" onClick={this.handleClick.bind(this)}><span>{this.props.details.length==1 && this.props.details[0].name=="" ? "ADD " : "EDIT "}</span><span>DETAILS</span></a>
                {
                    this.props.displayModal ?
                    <Modal>
                        <div className="modal">
                            <div className="modal-header">Select Details</div>
                            <div className="modal-body">{
                                this.state.details.map((detail, index) => {
                                    console.log(index, detail.name, detail.value);
                                    return (
                                        <div>
                                            <Dropdown class_name="col s12 m6 l3">
                                                <div className={"input-field col s12"}>
                                                    <select className={detail.name!="" ? "dropdown-select" : "dropdown-select initial"} ref="nameBox" id={"name_"+index} defaultValue={detail.name!="" ? detail.name : ""}>
                                                        <option value="" disabled>Select Name</option>
                                                        {
                                                            Object.keys(this.props.attributes.details).map((detail_name) => {
                                                                return <option value={detail_name} key={detail_name}>{detail_name}</option>
                                                            })
                                                        }
                                                    </select>
                                                    <label></label>
                                                </div>
                                            </Dropdown>
                                            {
                                                detail.name !== "" ?
                                                <Dropdown class_name="col s12 m6 l3">
                                                    <div className={"input-field col s12"}>
                                                        <select multiple className={detail.value==="" ? "dropdown-select initial" : "dropdown-select"} ref="valueBox" id={"value_"+index} defaultValue={detail.value==="" ? "" : detail.value}>
                                                            <option value="" disabled>Select Value</option>
                                                            {
                                                                detail.name !== "" ?
                                                                this.props.attributes.details[detail.name].map((detail_value) => {
                                                                    return <option value={detail_value} key={detail_value}>{detail_value}</option>
                                                                })
                                                                : null
                                                            }
                                                        </select>
                                                        <label></label>
                                                    </div>
                                                </Dropdown>
                                                : null
                                            }
                                        </div>
                                    )
                                })
                            }</div>
                            <div className="modal-footer">
                                <div className="row">
                                    <div className="col s12 m5"><a className="btn" onClick={this.cancelSelection.bind(this)}>Cancel</a></div>
                                    <div className="col s12 m7"><a className="btn" onClick={this.updateSelection.bind(this)}>Save</a></div>
                                </div>
                            </div>
                        </div>
                    </Modal>
                    : null
                }
                </div>
            )
        }
    }

    export default CarInfo

import React, {Component} from 'react'

class Dropdown extends Component {
    render() {
        return (
            <div className={this.props.class_name}>{this.props.children}</div>
        )
    }
}

export default Dropdown