Невозможно отобразить значения вместо меток в раскрывающемся списке

Я пытаюсь отобразить свои значения в раскрывающемся списке, но он показывает мне метки. Как видно из данных, он оформлен как {label, value}. Все выглядит нормально, я не мог найти проблему. Я надеюсь, что некоторые из вас могут помочь.

Если вы хотите проверить библиотеку Dropdown: https://www.npmjs.com/package/react-native-element-dropdown

Это мои данные, которые поставляются с setDropdown(item.options):

Array [
  Object {
    "label": "319",
    "value": "Ahşap",
  },
  Object {
    "label": "320",
    "value": "Betonarme",
  },
  Object {
    "label": "321",
    "value": "Çelik ",
  },
  Object {
    "label": "322",
    "value": "Kütük",
  },
  Object {
    "label": "323",
    "value": "Prefabrik",
  },
]
Array [
  Object {
    "label": "332",
    "value": "Var",
  },
  Object {
    "label": "333",
    "value": "Yok",
  },
]... and goes on

App.js

const [selected, setSelected] = useState({});

        //it will arrange object(object) => array(object)
  function setDropdown(query) {
    const response = query;
    try {
      const array = Object.entries(response).map(([key, value]) => ({
        label: key,
        value: value,
      }));
      return array;
    } catch (error) {
      console.info(error);
    }
  }

function renderItems({ item }) {
let dropdownData = setDropdown(item.options);
    if (Object.keys(item.options).length > 0) {
      //console.info(item.name + " is dropdown");
      //console.info(dropdownData); I shared the data at the beginning of the post
      return (
        <View>
          <CustomDropdown
            text = {item.name}
            data = {dropdownData}
            value = {selected}
            setValue = {setSelected}
          />
        </View>
      );
    } else if (Object.keys(item.options).length == 0) {
      const keyboardType = item.numeric ? "numeric" : "default";
      //console.info(item.name + " is textinput");
      return (
        <View style = {styles.inputContainer}>
          <TextInput
            style = {styles.input}
            placeholder = {item.name}
            keyboardType = {keyboardType}
          />
        </View>
      );
    }
  }

CustomDropdown.js

function CustomDropdown({ text, data, value, setValue }) {
  const [isFocus, setIsFocus] = useState(false);

  return (
    <View>
      <View style = {{ backgroundColor: "#fff", padding: 10, borderRadius: 15 }}>
        <Dropdown
          style = {[styles.dropdown, isFocus && { borderColor: "blue" }]}
          placeholderStyle = {styles.placeholderStyle}
          selectedTextStyle = {styles.selectedTextStyle}
          inputSearchStyle = {styles.inputSearchStyle}
          placeholder = {!isFocus ? text : "..."}
          data = {data}
          maxHeight = {300}
          labelField = "label"
          valueField = "value"
          onFocus = {() => setIsFocus(true)}
          onBlur = {() => setIsFocus(false)}
          value = {value}
          onChange = {(item) => {
            setValue(item.value);
            setIsFocus(false);
          }}
        />
      </View>
    </View>
  );
}

Откуда взялся ваш компонент Dropdown?

kaledev 11.11.2022 10:07

Это отдельная библиотека, которая представляет собой раскрывающийся список «реагировать на собственный элемент». Это означает, что это корневой компонент

Onur Serbes 11.11.2022 10:10

Можете ли вы снова проверить результат setDropdown(item.options)? Возможно, его значение по умолчанию должно быть таким: [ { метка: 'Элемент 1', значение: '1' }, { метка: 'Элемент 2', значение: '2' }, { метка: 'Элемент 3', значение: '3' }, { метка: 'Элемент 4', значение: '4' }, { метка: 'Элемент 5', значение: '5' }, { метка: 'Элемент 6', значение: '6' }, { метка: «Элемент 7», значение: «7» }, { метка: «Элемент 8», значение: «8» }, ]

kaledev 11.11.2022 10:21

Я сделал это, но все равно.

Onur Serbes 11.11.2022 10:25

Пожалуйста, протестируйте со статическим значением вместо setDropdown(item.options). например, data = {[ {ключ: 'Элемент 1', значение: 'значение 1' }, {ключ: 'Элемент 2', значение: 'значение 2' }, ]}

kaledev 11.11.2022 10:29

Пожалуйста, поделитесь ссылкой на codeandbox с вашим примером.

Priyen Mehta 11.11.2022 10:31

Я могу получить данные без проблем, я не думаю, что они должны быть статичными. Я также назначаю его как dropdownData = setDropdown(item.options) и изменяю значения полей. Похоже, сейчас работает, но если у вас есть лучшее решение. Пожалуйста, поделитесь со мной. Хорошего дня!

Onur Serbes 11.11.2022 10:47
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
Я научился создавать карусель в ReactJS с помощью библиотеки Splide.
Краткое введение в Styled-компоненты
Краткое введение в Styled-компоненты
В настоящее время популярность Styled-компонентов становится все больше и больше. Большинство проектов, построенных на React.js, используют эту...
ДЕНЬ 8 | Страница обзора в React
ДЕНЬ 8 | Страница обзора в React
На этом сегодня все, завтра снова увидимся с новым проектом!
Как настроить среду разработки React.
Как настроить среду разработки React.
Весь процесс настройки среды разработки react.
0
7
117
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вероятно, вам нужно добавить поддержку метки в ваши объекты данных. Вероятно, он ищет его и, поскольку не находит, принимает значение первого реквизита в объекте. Вы можете сделать это, изменив структуру данных или сопоставив массив данных, когда вы передаете его в раскрывающийся список следующим образом:

data.map(option => {
  return {
    ...option,
    label: option.value
  }
})

«Ключ» — это метка в моих данных. Я изменил его на ярлык, все тот же

Onur Serbes 11.11.2022 10:24

Извините за поздний ответ, теперь я понимаю, что вы имеете в виду. Ты был прав с самого начала. Значение должно быть первой опорой объекта. Я изменил его как «метка: значение»

Onur Serbes 17.11.2022 13:04

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