Блог

Главная - Вопросы по программированию - У меня возникла проблема с заполнением выбранного ввода информацией из состояния

У меня возникла проблема с заполнением выбранного ввода информацией из состояния

#javascript #html #reactjs #select

Вопрос:

установка состояния для пустого объекта

const [categories, setCategories] = useState({});

выполнение вызова axios и настройка состояния. Я проверил, и res возвращает правильные данные.

   const res = await axios.get(`${API}/categories`);
  setCategories(res.data);
};


useEffect(() => {
  getCategories()
},[])

создание формы и попытка заполнить панель выбора

       <h1>Add New Item</h1>
      <section className="form">
        <form>
         
          <label htmlFor="category">Category: </label>

          <select id="category" required>
            <option disabled selected value>
              Select A Category
            </option>

            {Object.keys(categories).map((category) => (
              <option value={category.category_id}>{category.name}</option>
            ))} {console.log(categories)}
          </select>

   
        </form>
      </section>

Комментарии:

1. в чем проблема?

2. не могли бы вы, пожалуйста, отобразить ответ, который приходит от вызова API (const res = ожидание axios.get( ${API}/categories ))

3. В чем проблема? Пожалуйста, предоставьте более подробную информацию и контекст для вашей проблемы и того, о чем вы просите кого-либо здесь, чтобы помочь вам. Кроме того, не регистрируйте рендеринг в консоли как непреднамеренный побочный эффект, он ненадежен для каких-либо утверждений.

Ответ №1:

Код Solution:https://stackblitz.com/edit/react-6twagp?file=src/App.js

Я попытался решить эту проблему

 import React from 'react';
import './style.css';
import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function App() {
  const [categories, setCategories] = useState();
  const API = 'https://fakestoreapi.com/';
  const getCategories = async () => {
    const res = await axios.get(`${API}/products`);
    setCategories(res.data);
  };
  useEffect(() => {
    getCategories();
  }, []);
  return (
    <div>
      <h1>Add New Item</h1>
      <section className="form">
        <form>
          <label htmlFor="category">Category: </label>

          <select id="category" required>
            <option disabled selected value>
              Select A Category
            </option>
            {categories amp;amp;
              categories.map((category) => (
                <option value={category.id}>{category.title}</option>
              ))}
          </select>
        </form>
      </section>
    </div>
  );
}

Метки: