ReactJS- 在 react-bootstrap 中构建带有下拉项的动态水平菜单 [英] ReactJS- building a dynamic horizontal menu with dropdown items in react-bootstrap
问题描述
我正在使用
如何摆脱错误?
我有这样的 ComponentDidMount :
componentDidMount(prevProps) {公理.post('/api/fetchLevels').then(响应 => {//重定向到首页//history.push('/')console.log("header response = ");控制台日志(响应)；var levels_all = response.data.result;this.setState({水平_全部:水平_全部})}).catch(错误=> {this.setState({//错误:error.response.data.errors错误:错误})})}//ComponentDidMount 结束您收到该错误是因为您在三元运算符中重新分配值.要解决此问题，您可以切换到这样的 if-else 语句:
{this.state.levels_all.map((item, idx) => {如果(item.parent_id == 0){cat_id_found=item.idcat_name = item.level_name返回 (<NavDropdown title="Dropdown1111" id="basic-nav-dropdown">{this.state.levels_all.map((item1, idx) => (cat_id_found == item1.id ?(<NavDropdown.Item href="#action/3.1">{item1.level_name}</NavDropdown.Item>) : 空值))}</NavDropdown>)}返回空值})}此外，我认为最好在此处使用 if-else 语句，因为您不会在 else 部分返回任何内容，因此使用如此矫枉过正和令人困惑的东西毫无意义.
I am building a page with a horizontal menu of categories and subcategories to be populated with database data using react and react-bootstrap.
The database table (namely levels ) has the following structure:
id | level_name | category | subcategory | parent_id
If the row is for a category then subcategory and parent_id have the value 0 and category contains 1. If the row is for a subcategory then category column contains 0, subcategory contains 1 and parent_id has the id of the category of which this is a subcategory.
While building the horizontal menu of categories with subcategories as drop down items , I iterate over the database table and when I get a row with zero as the value in parent_id, I pick the id value and iterate over the table again to find the subcategories.
To make things simple, you can just concentrate on the map function used twice. That is where the problem occurs.
My reactJS code is :
class Header extends Component {
constructor (props) {
super(props)
this.state = {
levels_all:[],
cat_id_found:0,
cat_name:''
}
}
componentDidMount(prevProps) {
//levels_all gets the value through an ajax call with axios here
this.setState({
levels_all: levels_all
})
}// end of componentDidMount
render () {
var cat_id_found=0;
var cat_name = '';
return (
<>
<nav className='navbar navbar-expand-md navbar-light navbar-laravel'>
<div className='container'>
<Link className='navbar-brand' to='/'>Tasksman</Link>
</div>
</nav>
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
{
this.state.levels_all.map( (item, idx) => ( item.parent_id == 0 ?
(
cat_id_found=item.id,
cat_name = item.level_name
<NavDropdown title="Dropdown1111" id="basic-nav-dropdown">
this.state.levels_all.map( (item1, idx) =>
(
cat_id_found == item1.id ? (
<NavDropdown.Item href="#action/3.1">item1.level_name</NavDropdown.Item>
):(
)
))
</NavDropdown>
) : (
)
))
}
</Nav>
</Navbar.Collapse>
</Navbar>
<h1>THIS IS HEADER </h1>
</>
)
}
}
export default Header
But I get the following error in command prompt while running the command npm run watch:
Header.js: Unexpected token, expected "," which indicates at the title of the line -
<NavDropdown title="Dropdown1111" id="basic-nav-dropdown">.
Screenshot is here :
How to get rid of the error ?
EDIT:
I have ComponentDidMount like this :
componentDidMount(prevProps) {
axios
.post('/api/fetchLevels')
.then(response => {
// redirect to the homepage
//history.push('/')
console.log("header response = ");
console.log(response);
var levels_all = response.data.result;
this.setState({
levels_all: levels_all
})
})
.catch(error => {
this.setState({
// errors: error.response.data.errors
errors: error
})
})
}// end of ComponentDidMount
You get that error because you are re-assigning values in your ternary operator. To fix this you can switch to an if-else statement like this:
{
this.state.levels_all.map((item, idx) => {
if (item.parent_id == 0){
cat_id_found=item.id
cat_name = item.level_name
return (
<NavDropdown title="Dropdown1111" id="basic-nav-dropdown">
{
this.state.levels_all.map((item1, idx) => (
cat_id_found == item1.id ? (
<NavDropdown.Item href="#action/3.1">
{item1.level_name}
</NavDropdown.Item>
) : null))
}
</NavDropdown>
)
}
return null
})
}
Furthermore, I think it's better to use an if-else statement here because you are not returning anything in the else part so there's no point in using something so overkill and confusing.
这篇关于ReactJS- 在 react-bootstrap 中构建带有下拉项的动态水平菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
