#reactjs
Вопрос:
Я могу успешно получить данные из своей базы данных , но как я могу отобразить их внутри Select?
Здесь я хочу отобразить свои данные внутри поля выбора
<Select
fullWidth
value={newUsers}
onChange={handleChange}
>
<MenuItem value={0}>{newUsers.label}</MenuItem>
именно так я вызываю данные из базы данных (это работает, и я могу видеть данные из своей консоли)
const [newUserLists, setNewUserLists] =useState([]);
const newUsers= [];
const fetchData = async () => {
const response = await getreason();
response.data.map(function(u){
newUsers.push({
label: u.applicationcode,
value: u.applicationid
})
})
setNewUserLists(newUsers)
}
useEffect(() => {
fetchData();
}, [reRender]);
это результат в console.log
Комментарии:
1. Вы используете material-ui? Любому трудно ответить на этот вопрос без надлежащего контекста того, откуда
Select
иMenuItem
откуда он исходит. Вы можете добавить теги к вопросу и/или быть более явными в заголовке/основном тексте2. О, извините за это, я использовал материал-пользовательский интерфейс
Ответ №1:
Давайте смоделируем это на странице «Материал-пользовательский интерфейс», выберите учебник и документ API. Там мы можем увидеть несколько вещей:
value
является текущим выбранным входным значением. Похоже, вы пытаетесь установить его в список объектов, которые вы читаете из ответа БД, что неверно. Это обычная практика, чтобы сказать что-то вроде следующего:
const [selected, setSelected] = useState("");
const handleChange = (event) => {
setSelected(event.target.value);
};
return (
<FormControl>
<InputLabel>Selection</InputLabel>
<Select
value={selected}
onChange={handleChange}
>
{/* MenuItems go here */}
</Select>
</FormControl>
);
- В несвязанном (с материалом-пользовательским интерфейсом) примечании вы, похоже, на самом деле не используете
newUserLists
его в своем коде. Я собираюсь сделать предположение, чтоnewUsers
это просто заполнитель для вставки данных из ответа, но, согласно ответу @Naim-Mustafa, он не нужен и не должен использоваться в вашем отображении. - Теперь, как мы используем
newUsersList
для создания спискаMenuItem
s? Так же, как вы делали это в других местах,map
это ключ:
{newUsersList.map(({ label, value }) => (
<MenuItem id={value} value={value}>
{label}
</MenuItem>
))}
Обратите внимание, что я предполагаю value
, что это уникально для целей данной id
области. Если это не так, замените чем-нибудь более подходящим.
Ответ №2:
Вы можете перейти const newUsers= [];
на let newUsers= [];
но вам вообще не нужно использовать массив новых пользователей, вместо этого попробуйте использовать состояние
const [newUserLists, setNewUserLists] =useState([]);
const [selectedOption, setSelectedOption] = useState();
const fetchData = async () => {
const response = await getreason();
setNewUserLists(response.data.map(user => ({
label: user.applicationcode,
value: user.applicationid})))
}
useEffect(() => {
fetchData();
}, [reRender]);
return (
<>
<select value={selectedOption}
onChange={(event) => setSelectedOption(event.target.value)}
>
{newUserLists
.map(user =>
<option key={user.label} value={user.label}>
{user.label}</option>}
</select>
</>
Комментарии:
1. Не могли бы вы, пожалуйста, завершить это
<select ...props>
2. Что это значит?
3. извините, это классический html-тег select, я обновил его сейчас