在 React 中的 GET 请求后动态生成导航链接时出现问题答案

【问题标题】：Having issues dynamically generating nav links after a GET request in React在 React 中的 GET 请求后动态生成导航链接时出现问题
【发布时间】：2023-02-24 09:34:15
【问题描述】：

我正在开发一个 React 应用程序，并希望根据 GET 请求的结果动态生成一个下拉链接列表。基本上，GET 请求返回一个包含 2 个键值的对象数组，c代码&名称. cCode 将充当链接位置，cName 将是链接的专有名称。

当我运行下面的代码时，页面呈现，但是当我单击下拉列表时，列表是空白的。但是，我可以通过 console.log 确认来自请求的数组是否正确过来并且存在预期数据。

import React from 'react'
import { Nav, Navbar, NavDropdown } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'
import { useLocation } from 'react-router-dom';
import { ReactComponent as Logo } from './images/logos/unboxed/logo-black-full.svg';
import NavbarBrand from 'react-bootstrap/NavbarBrand';
import { Get } from 'react-axios';

function Banner() {
    const location = useLocation();
    return (
        <Navbar bg='light' variant='light' expand='lg' sticky='top'>
            <LinkContainer to='/'>
                <NavbarBrand bg='dark'>
                    <Logo className='.logo-svg' alt='Site Logo' height='30' />{'    '}
                    Resource Dashboard
                </NavbarBrand>
            </LinkContainer>
            <Navbar.Toggle aria-controls='basic-navbar-nav' />
            <Navbar.Collapse className='ml-5' id='basic-navbar-nav'>
                <Nav className='me-auto' activeKey={location.pathname}>
                    <NavDropdown title='Physical Sites' id='basic-nav-dropdown'>
                        <Get url="http://api.request/locations">
                            {(error, response, isLoading, axios) => {
                                if (error) {
                                    return (<div>Something bad happened: {error.message}</div>)
                                }
                                else if (isLoading) {
                                    return (<div>Loading...</div>)
                                }
                                else if (response !== null) {
                                    // console.log(response.data);
                                    const data = response.data;
                                    data.forEach(item => {
                                        <LinkContainer to={item.cCode}>
                                            <NavDropdown.Item eventKey={item.cCode}>{item.cName}</NavDropdown.Item>
                                        </LinkContainer>
                                    });
                                }
                            }}
                        </Get>
                    </NavDropdown>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )
}
export default Banner;

任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

有3个问题：

您不会返回上次 else if 的任何内容
您应该使用map 而不是forEach，因为forEach 不返回值
在 map 中使用括号而不是大括号来返回值

所以，你应该更换
```
data.forEach(item => {<...>})
```
和
```
return data.map(item => (<...>))
```

【讨论】：