无法获得API React JS返回的数组中的数组

Posted 2023-02-26

无法获得API React JS返回的数组中的数组

 const match = useRouteMatch('/groupDescription/:groupName');

    console.log(match.params.groupName);

    const [groupDescription, setGroupDescription] = useState([]);

    useEffect( () => 
        axios.get(`https://stormy-escarpment-89406.herokuapp.com/groups/getGroup?group_name=$match.params.groupName`)
            .then(response => 
                setGroupDescription(response.data);
            )
    , []);

这是我从api获取数据并保存的方式。以下是api返回的数据：

    "groupName": "Campit",
    "groupDescription": "Общественная организация Campit.kz",
    "numberOfHikes": "1",
    "admins": [
        "[phone]"
    ],
    "hikesHistory": [
        
            "hikeId": "5ec1763100e8620583cbbeff",
            "groupName": "Campit",
            "hikeDescription": "Отличный поход для фанатов Barcelona ",
            "startDate": "13.04.2020",
        
    ],
    "members": [
        
            "name": "Ерс",
            "surname": "Асылбеков",
            "photo": "https://i.ibb.co/VqncVzX/avatar.png",
            "status": "online",
            "phoneNumber": "[phone]",
            "role": "admin"
        
    ]

所以，当我显示组描述时，我只是做：

<Typography>groupDescription.groupName</Typography>

依此类推。但是我无法访问数组members，hikesHistory并从中显示数据。react中的项目使用functions而不是classes编写。请帮助我！

答案

groupDescription.members.map(hikeHistory) => (
  <>
   <Typography>ID - hikeHistory.hikeId</Typography>
   <Typography>Group Name - hikeHistory.groupName</Typography>
   <Typography>Description - hikeHistory.hikeDescription</Typography>
   <Typography>Start Date - hikeHistory.startDate</Typography>
  </>
)

这应该工作！