Как отобразить данные из базы данных в выбранном параметре?

#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>
</>