时间戳

首页 > 解决方案 > react-select：如何将map函数的结果整合到react-select的options中

reactjs - react-select：如何将map函数的结果整合到react-select的options中

问题描述

有人可以帮助我理解我所犯的错误吗？因为在反应选择框中，选项没有显示，但是当我打印选定的选项时，它没有给我未定义的值，事实上，它给了我正确的答案。

 <Card.Body>
                       
{ Object.entries(this.state.liste).map( ([key,valuee]) => 
                         
                 
                        
                            <div className="row ">
                            <div className="col-xl-11">
                                    <h6 className="align-items-center float-left">{key}</h6>
                                    <div className="text-right">
                            <div className="col-md-11" style={{width: '130px',  height: '20px',top: '-20px', right: '-400px'}}>
                                
                     
        < Select name = "secondSelectt"  multi={true} options=
       {valuee} 
       onChange={this.handleChange3}  />  
       </div>
                         
                            </div>
                            <div className="progress m-t-30 m-b-20" style={{height: '1px'}}>
                                        <div className="progress-bar progress-c-theme" role="progressbar" style={{width: '0%'}} aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"/>
                                    </div>
                                </div>
                            </div>) }

                           
                        </Card.Body>

标签： reactjsreact-select

解决方案

.map尝试在方法中添加 return 语句。在某些情况下，直接返回无法按预期工作

 <Card.Body>
        {
            Object.entries(this.state.liste).map(([key, valuee]) => {
                return (
                    <div className = "row" >
                        <div className="col-xl-11">
                            <h6 className="align-items-center float-left">{key}</h6>
                            <div className="text-right">
                                <div className="col-md-11" style={{ width: '130px', height: '20px', top: '-20px', right: '-400px' }}>
                                    <Select 
                                        name="secondSelectt" 
                                        multi={true} 
                                        options={valuee.map(e=>({label: e, value: e}))}
                                        onChange={this.handleChange3} 
                                    />
                                </div>
                            </div>
                            <div className="progress m-t-30 m-b-20" style={{ height: '1px' }}>
                                <div className="progress-bar progress-c-theme" role="progressbar" style={{ width: '0%' }} aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" />
                            </div>
                        </div>
                    </div>
                )
            }) 
        }
    </Card.Body >

推荐阅读