我正遇到功能组件的问题。我正在使用<ion-icon name="md-power" role="img" class="icon icon-md ion-md-power" aria-label="power"></ion-icon>
包来处理路线。我所拥有的是一个包含链接和按钮的列表，当我们单击按钮时，将打开一个下拉列表。此下拉菜单还包含链接。
我如何管理这些下拉菜单的状态？
我将每个下拉列表的状态视为一个单独的对象，react-router-dom侦听器将传递一个onClick / key作为具有布尔值的参数。基于该值，将在下拉列表中添加一个类。
我已经在类组件的帮助下实现了这一目标。
类组件：
property但是问题出在使用挂钩的功能组件上。 import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
class ToggleClass extends Component {
state = {};
toggle = dropdownName => {
// If it has the true value then turn into false, It is a behavior of a toggle.
if (this.state[dropdownName]) {
this.setState({ [dropdownName]: false });
}
// If there is not any dropdown is opened it means state object is empty
// Object.keys will return an empty array then please open that dropdown.
else if (Object.keys(this.state).length === 0) {
this.setState({ [dropdownName]: true });
}
// Else block will ony trigger when the user clicked on other dropdown,
// then close the last dropdown and just open the new one
else {
Object.keys(this.state).forEach(i => {
this.setState({ [i]: false });
});
this.setState({ [dropdownName]: true });
}
};
onRouteChanged = () => {
// Take a state object and convert all its keys into an array
// and set it to false whenever a route changes.
Object.keys(this.state).forEach(i => {
// pageMenu: false
this.setState({ [i]: false });
});
};
componentDidUpdate(prevProps, prevState, snapshot) {
if (this.props.location !== prevProps.location) {
this.onRouteChanged();
}
}
componentDidMount() {
this.onRouteChanged();
}
render() {
return (
<ul className="list">
<li>
<Link to="/link1">Link 1</Link>
</li>
<li>
<button onClick={() => this.toggle("dropdown1")}>Dropdown 1</button>
<ul className={this.state["dropdown1"] ? "open" : "hide"}>
<li>
<Link to="/link2">Link 2</Link>
</li>
<li>
<Link to="/link3">Link 3</Link>
</li>
</ul>
</li>
<li>
<button onClick={() => this.toggle("dropdown2")}>Dropdown 2</button>
<ul className={this.state["dropdown2"] ? "open" : "hide"}>
<li>
<Link to="/link4">Link 4</Link>
</li>
<li>
<Link to="/link5">Link 5</Link>
</li>
</ul>
</li>
</ul>
);
}
}
export default withRouter(ToggleClass);
有一个名为useLocation的钩子，该钩子返回当前的react-router-dom。但是pathname函数正在更新状态。我无法在onRouteChanged挂钩内使用此函数，它会变成无限循环。
useEffect但是，如果我从依赖项数组中删除useEffect(() => {
onRouteChanged();
}, [location, onRouteChanged]);
，则linter会对此发出警告
onRouteChanged
React Hook useEffect has a missing dependency: 'onRouteChanged'. Either include it or remove the dependency array react-hooks/exhaustive-deps功能组件：
useEffect(() => {
onRouteChanged();
}, [location]);
您能指导我解决这些错误的最佳方法是什么吗？
答案 0 :(得分：0)
我认为您必须重构状态和切换实现的结构，这是固定的沙箱示例（我没有更改状态结构只是解决了您的问题）。