我在使用来自状态的信息填充选择输入时遇到问题答案

【问题标题】：I'm having an issue populating a select input with information from state我在使用来自状态的信息填充选择输入时遇到问题
【发布时间】：2021-11-16 12:10:54
【问题描述】：

将状态设置为空对象

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>

【问题讨论】：

有什么问题？
能否请您显示来自 API 调用的响应 (const res = await axios.get(${API}/categories))
有什么问题？请为您遇到的问题提供更多详细信息和背景信息，以及您要求这里的任何人帮助您解决的问题。此外，不要将渲染控制台登录作为无意的副作用，它对于做出任何类型的断言都是不可靠的。

标签： javascript html reactjs select

【解决方案1】：

代码解决方案：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 &&
              categories.map((category) => (
                <option value={category.id}>{category.title}</option>
              ))}
          </select>
        </form>
      </section>
    </div>
  );
}

【讨论】：