Как привязать значение массива из API к значению параметра компонента «реагировать-выбрать» в реакции js

Я пробовал это, но не работал

{Members.map(Members=>
<Select
className = "effect-16"
dataSource = {Members.displayName}
placeholder = "Select Section"
value = {this.state.selectedOptions}
OnChange = {this.handleSelect}
isSearchable = {true}
isMulti
isClearable
/>
)}

Выходной дисплей, как на следующем изображении

Дайте мне решение для этого

<Select ... dataSource = {Members.map(m => m.displayName)} /> что-то в этом роде?
Nsevens 28.04.2023 08:20

Я тоже пробовал это, но не работал. Спасибо за Ваш ответ.

Sundar 02.05.2023 08:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
84
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Для привязки значений массива к параметрам реакции-выбора вам необходимо передать массив объектов с парой метки и значения.

Так:

const arr = [{ key: "test 1", value: 1 }, { key: "test 2", value: 2 }];

<Select
  options = {arr}
  ...
/>

Пожалуйста, возьмите это в качестве примера, спасибо.

Для этой проблемы я нашел решение для использования компонента Multiselect:

import Multiselect from 'multiselect-react-dropdown';

    
    this.state = {  PersonName: []  }
    
     GetValues = async () => {
            let url = "someapi link";
            let user = JSON.parse(localStorage.getItem('user'));
            const accessToken = user;
            const reqData = await fetch(url, {
                method: 'GET',
                headers: {
                    Authorization: "Bearer " + accessToken,
                    "Content-type": "application/json",
                    "Accept": "application/json",
                    "Access-Control-Allow-Headers": "Access-Control-Request-Headers "
                },
            })

            const resData = await reqData.json();

            for (let i = 0; i < resData.length; i++) 
            {
                this.state.PersonName.push(resData[i].label);
            }

            this.setState({ PersonName: this.state.PersonName })
    }
    
    
    <Multiselect className = "effect-16" showArrow
    options = {PersonName}
    getSelectedItems = {PersonName}
    isObject = {false} />

Источник видео: youtube.com/watch?v=OtEqBBcPREY

Sundar 11.05.2023 10:23

Другие вопросы по теме

Реагировать на выбор не обновляется правильно после обновления другого связанного поля выбора
Реагировать на выбор управления
Возврат к реквизитам по умолчанию для реакции на выбор на основе условия в React-Select
Как изменить радиус границы тега реакции-выбора
Я пытаюсь проверить свои выпадающие списки в форме с помощью кипариса, он выбирает значения, но не отправляет их (работает вручную)
Как импортировать папку/файл из общей папки в папку src в ответ
Typescript с формой React Hook Form и React-select Множественное выбранное значение, не отправленное формой
Значение по умолчанию для реакции-выбора не отображается при использовании хука useState
Как опубликовать объектный идентификатор мангуста с помощью axios во внешнем интерфейсе, выбрать ответ из бэкэнда
Мне нужно реагировать на множественный выбор с параметрами виртуализированного списка