Я пытаюсь отобразить свои значения в раскрывающемся списке, но он показывает мне метки. Как видно из данных, он оформлен как {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>
);
}
Это отдельная библиотека, которая представляет собой раскрывающийся список «реагировать на собственный элемент». Это означает, что это корневой компонент
Можете ли вы снова проверить результат setDropdown(item.options)? Возможно, его значение по умолчанию должно быть таким: [ { метка: 'Элемент 1', значение: '1' }, { метка: 'Элемент 2', значение: '2' }, { метка: 'Элемент 3', значение: '3' }, { метка: 'Элемент 4', значение: '4' }, { метка: 'Элемент 5', значение: '5' }, { метка: 'Элемент 6', значение: '6' }, { метка: «Элемент 7», значение: «7» }, { метка: «Элемент 8», значение: «8» }, ]
Я сделал это, но все равно.
Пожалуйста, протестируйте со статическим значением вместо setDropdown(item.options). например, data = {[ {ключ: 'Элемент 1', значение: 'значение 1' }, {ключ: 'Элемент 2', значение: 'значение 2' }, ]}
Пожалуйста, поделитесь ссылкой на codeandbox с вашим примером.
Я могу получить данные без проблем, я не думаю, что они должны быть статичными. Я также назначаю его как dropdownData = setDropdown(item.options) и изменяю значения полей. Похоже, сейчас работает, но если у вас есть лучшее решение. Пожалуйста, поделитесь со мной. Хорошего дня!
Вероятно, вам нужно добавить поддержку метки в ваши объекты данных. Вероятно, он ищет его и, поскольку не находит, принимает значение первого реквизита в объекте. Вы можете сделать это, изменив структуру данных или сопоставив массив данных, когда вы передаете его в раскрывающийся список следующим образом:
data.map(option => {
return {
...option,
label: option.value
}
})
«Ключ» — это метка в моих данных. Я изменил его на ярлык, все тот же
Извините за поздний ответ, теперь я понимаю, что вы имеете в виду. Ты был прав с самого начала. Значение должно быть первой опорой объекта. Я изменил его как «метка: значение»
Откуда взялся ваш компонент Dropdown?