我的网站正在使用 react-bootstrap 来管理导航。
const Panes = (props) => (
<Tabs className="pane" defaultActiveKey="construction" transition={false}>
<Tab eventKey="home" title="Home">
<Home username={props.username} password={props.password} />
</Tab>
<Tab eventKey="positions" title="Positions">
<Positions />
</Tab>
<Tab eventKey="trades" title="Trade History">
<Trades />
</Tab>
<Tab eventKey="construction" title="Portfolio Construction">
<Construction username={props.username} />
</Tab>
<Tab eventKey="risk" title="Risk Analytics">
<Risk />
</Tab>
</Tabs>
在 <Positions />
组件中,我有一个简单的 useEffect(() => {console.log("THIS IS A TEST")}, [])
为什么在我点击位置选项卡之前,我会在控制台中看到“这是一个测试”?该选项卡似乎尚未呈现?我对钩子应该如何工作有什么误解吗?
我的最终目标是仅在用户导航到此 Positions
页面后才获取数据。我如何实现这一目标?
编辑:我通过设置 unmountOnExit={true}
来处理事情。这一次仅呈现一个选项卡。但理想情况下,我想在第一次切换到该选项卡时进行渲染。我以为这就是 mountOnEnter={true}
会做的,但没有用?
答案 0 :(得分:0)
在 React 文档中,他们对此进行了解释。
如果您熟悉 React 类的生命周期方法,您可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。
https://reactjs.org/docs/hooks-effect.html
它基本上在第一次渲染时运行,如果你不给它一个依赖数组,它将在每次渲染时运行(每当状态改变时)。
如果你只想获取一次数据,你应该像这样使用它:
useEffect(() => {
//fetch data
},[])
如果你想让它在每次值改变时运行,你应该像这样使用它:
useEffect(() => {
//fetch data
},[value])