javascript - 带有钩子的 React 中 JSON 响应的下拉列表

Question

我想从我从 REST API 获得的数据中创建一个下拉列表。不幸的是，我已经尝试过的方法不起作用，下拉列表中没有显示任何内容。请参阅代码以供参考。它说 '

×
TypeError: teams.current.map is not a function

'

我的对象看起来像

[
    {
        "id": 5,
        "name": "hasda"
    },
    {
        "id": 6,
        "name": "asdasd"
    }
]

我看了一下那个链接，但没有太大帮助。我希望你能帮帮我

    import React, { useState, useEffect, useRef } from "react";
    import { useHistory } from "react-router-dom";
    import axios from 'axios'
    
    
    function Navbar() {
        const [team, setTeam] = useState([]);
    
    
        useEffect(() => {
            getTeams()
        }, []);
    
        const getTeams = () => {
            axios
                .get(`${process.env.REACT_APP_API_URL}/team/all`, {})
                .then((res) => {
                    console.log(res.data);
                    setTeam(res.data)
                })
                .catch((error) => {
                    console.log(error)
                })
        }
    
    
        return (
    
                 <p className="navbar-item">Mannschaften</p>
    
                 <div className="navbar-dropdown">
    
                 {/* {team.current.map((d, i) => (
    
                      <a className="navbar-item" href={i.mannschaftsname}>{i.mannschaftsname}</a>
    
                  ))}  */}



                 {/* {
                   this.state.team.map((obj) => {
                   return <option team={obj.id}>{obj.name}</option>
                    })
                 } */}

                   <a className="navbar-item" href="/login">Test</a>
                   </div>
            </div>

    );
}

export default Navbar;

标签： javascriptreactjsjsonaxiosreact-hooks

Answer 1

您的州名是团队而不是团队。因此，您可以尝试以下操作：

<select>
{

     team?.map((obj) => {
          return <option team={obj.id}>{obj.name}</option>
     })  
}
</select>