首页 > 解决方案 > React-Select:值未正确显示

问题描述

我在其中值从 api 恢复的形式中创建 ga 选择。

现在我的问题是选择没有以正确的方式显示所有值,所以我可以找到这些值,但它没有出现在列表中(因为它被剪切了)

在此处输入图像描述

如您所见,它未正确显示。

 const listaRealmTrovata = async () => {
        await axios.get(`${apiUrlRealm}?deletedDate.specified=false`)
            .then(
                (resp) => {
                    // recupero in questo modo la lista dei realm attivi
                    resp.data.map(res => {
                        console.log("res ", res)
                        setListaRealm(listaRealm => [...listaRealm, { value: res.id, label: res.realmId }])
                    })
                }
            )
    }

    useEffect(() => {
        listaRealmTrovata()
    }, [])

    return (
    <div>
        <div className="container">
            <Row className="justify-content-center">
                <Col md="8">
                    <h2>
                  Create                        </h2>
                </Col>
            </Row>


            <AvForm model={{}} onSubmit={saveEntity}>
                <Row>
                    <Col md="12">
                        <div style={{ marginTop: 50, marginBottom: 50 }}>
                            <Label for="realm">
                                Realm
                            </Label>
                            <Select options={listaRealm.length > 0 ? listaRealm : null} isMulti className="select-custom-class" />
                        </div>
                    </Col>
                </Row>

                <div className="container my-3">
                    <div className="col-md-12 text-center" style={{ marginTop: 30 }} >
                        <Button color="primary" id="save-entity" data-cy="entityCreateSaveButton" type="submit" style={{}}>
                            Save
                        </Button>
                    </div>
                </div>
            </AvForm>
        </div>
    </div>

我该如何解决?谢谢你

编辑:

我曾尝试使用:

const customStyles = { option: (provided, state) => ({ padding: 5, }), }

我可以看到更多的价值,但不是所有的价值..

标签: javascriptreactjstypescript

解决方案


推荐阅读