问题

I'm working on a React app and would like to dynamically generate a list of dropdown links based on the results of a GET request. Basically, the GET request returns an array of objects with 2 key values, cCode & cName. cCode will act as the link location and cName would be the link's proper name.

When I run the below code, the page renders, but when I click the dropdown, the list is blank. I can however confirm with a console.log that the array from the request is coming over properly and the expected data is present.

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;

Any help would be greatly appreciated.

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;

答案1

得分: 0

有3个问题：

1. 最后一个else if中没有返回任何内容

2. 应该使用map而不是forEach，因为forEach不返回值

3. 在map中使用括号而不是花括号，以返回值

所以，你应该将以下代码：

data.forEach(item => {<...>})

替换为：

return data.map(item => (<...>))

data.forEach(item => {<...>})

return data.map(item => (<...>))