Question

我正在尝试在其他组件中显示当前用户名，但是它不起作用，我在做什么错呢？

在这里我要初始化用户名（App.js）

class App extends Component{
  constructor(props) {
    super(props);
    this.state = {
      logged_in: localStorage.getItem('token') ? true : false,
      username: ''
    };
  }
  componentDidMount() {
    if (this.state.logged_in) {
      fetch('http://localhost:8000/user/current_user/', {
        headers: {
          Authorization: `JWT ${localStorage.getItem('token')}`
        }
      })
        .then(res => res.json())
        .then(json => {
          this.setState({ username: json.username });
          console.log(json.username);
        });

    }
  }
  render() {
  return (
    <div className="App">
      <Router history={history}>
        <Switch>
          <Route exact path="/" component={First} />
          <Route path="/home" component={Projects} />
          <Route path="/menu" component={MenuH} />
          <Route path ="/createProject" component={CreateP} />
          <Route path ="/connect" component={Newacount} />
          <Route component={Notfound} />
        </Switch>
      </Router>
    </div>
  );
  }
}
...

这就是我在其他组件（项目）中调用它的方式

{this.state.username}

Answer 1

您的项目组件无权访问App中的状态。

您应使用React Context或Redux之类的状态管理器来完成此操作

Answer 2

这将行不通，您不能仅直接在所有子组件中访问父状态，您必须将父状态发送给子组件作为访问它们的道具。

在这种情况下，您想在所有子组件中使用一个状态，那么最好使用Redux，它将为您提供一个全局状态，该状态可以在所有组件中访问。您也可以使用React的Context API解决此问题。

Answer 3

关于How to pass component via react router的讨论很好。

在讨论之后，您的代码将如下所示：

<div className="App">
      <Router history={history}>
        <Switch>
          <!-- Pass username as props here -->
          <Route path="/your-route" render={()=><Projects username={this.state.username}/>} />
        </Switch>
      </Router>
</div>

然后使用Projects将其检索到this.props.username组件中。

Answer 4

尝试将状态作为道具发送给孩子，然后从孩子那里访问它！或者直接访问状态，您可以使用react中的redux store或context api！

<Route path="/home" render={()=><Home username={this.state.username} />} />

在ReactJS的另一个组件中呈现状态

4 个答案: