Reactjs 如何使用函数设置反应状态

我需要从浏览器地址栏获取当前的

url

，并将该值设置为

react

状态的

currentPath

这是我的代码，看起来像：

import React, { Component } from "react";
import "./App.css";
import "./css/custom.css";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useLocation,
} from "react-router-dom";

import NavigationBar from "./pages/homepage-components/1-navbar";
import HomePage from "./pages/HomePage";
import Post from "./pages/Post";

function NavigationHeader() {
  const location = useLocation();
  return location.pathname;
}

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentPath: "",
    };
  }
  componentDidMount() {
    this.setState({
      currentPath: NavigationHeader, //even tried NavigationHeader() and NavigationHeader.toString
    });
  }

  render() {
    return (
      <Router>
        {/* --------------- Navigation Bar --------------- */}
        <NavigationBar />
        Path is: {this.state.currentPath}

        {/* --------------- End of Navigation Bar --------------- */}
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route path="/post" component={Post} />
        </Switch>
      </Router>
    );
  }
}

export default App;

import React，{Component}来自“React”；
导入“/App.css”；
导入“/css/custom.css”；
进口{
BrowserRouter作为路由器，
转换
路线,，
使用位置，
}从“反应路由器dom”；
从“/pages/homepage components/1-navbar”导入导航栏；
从“/pages/HomePage”导入主页；
从“/pages/Post”导入帖子；
函数NavigationHeader（）{
const location=useLocation（）；
返回location.pathname；
}
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
当前路径：“”，
};
}
componentDidMount（）{
这是我的国家({
currentPath:NavigationHeader，//甚至尝试了NavigationHeader（）和NavigationHeader.toString
});
}
render（）{
返回(
{/*----导航栏-----------------*/}
路径为：{this.state.currentPath}
{/*----导航栏的结尾-----------------*/}
);
}
}
导出默认应用程序；

---

但它不会更新

当前路径

，因为它所说的

路径是：{this.state.currentPath}

，它没有显示。有人能帮我吗？

您可以从窗口获取当前url

componentDidMount() {
  this.setState({
  currentPath: window.location.href
 });
}

---

尽管设置

currentPath

毫无意义，而且您的示例是一个糟糕的做法，但您可以使用

setLocation

道具渲染

NavigationHeader

：

function NavigationHeader({ setLocation }) {
  const location = useLocation();

  React.useEffect(() => {
    setLocation(location.pathname)
  }, [location.pathname])

  return null;
}

---

钩子在

类组件

中不起作用，它们仅用于

功能组件

。@PrathapReddy然后我如何将类组件更改为功能组件才能完成此操作？请查看关于如何使用

useLocation

和关于位置更改的更新

路径名。它是声明性的。但这不会为每个路由更改更新
当前路径
。我们不需要将
位置
添加为钩子依赖项而不是
[]
！？要侦听路径更改更新吗？如果要对
NavigationBar
执行任何条件渲染，取决于我从
NavigationHeader
获取的值，是否可以在
//条件渲染
中执行？是的，这是可能的，但仍然是一种不好的做法。尝试隔离到最小的可重用组件中。在您的情况下，如果
NavigationBar
和
NavigationHeader
共享相同的状态，则可以将它们组合到另一个组件中，例如
Navigation
。但这是一个完全不同的话题
{/* --------------- Navigation Bar --------------- */}
<NavigationHeader setLocation={ (currentPath) => this.setState({ currentPath }) }/>

function NavigationHeader() {
  const location = useLocation();

  return <p>Path is: {location.pathname}</p>;
}


function App() {
  return (
    <Router>
      {/* --------------- Navigation Bar --------------- */}
      <NavigationBar />
      <NavigationHeader />

      {/* --------------- End of Navigation Bar --------------- */}
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/post" component={Post} />
      </Switch>
    </Router>
  );
}