Состояние рендеринга в другом компоненте в reactjs
Я пытаюсь отобразить текущее имя пользователя в другом компоненте, но это не работает, что я делаю неправильно?
Здесь я инициализирую имя пользователя (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.info(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}
Ответы 4
У вашего компонента "Проекты" нет доступа к состоянию в App.
Вы должны сделать это с помощью менеджера состояний, такого как Реагировать на контекст или Редукс.
Это не сработает, вы не можете просто получить доступ к родительскому состоянию напрямую во всех дочерних компонентах, вы должны отправить родительское состояние дочерним компонентам в качестве поддержки для доступа к ним.
В подобном сценарии, когда вы хотите использовать одно состояние во всех ваших дочерних компонентах, хорошо использовать Redux, он предоставит вам глобальное состояние, которое будет доступно во всех ваших компонентах. Также вы можете решить эту проблему с помощью React Контекстный API.
Вот хорошее обсуждение Как передать компонент через реактивный маршрутизатор.
После обсуждения ваш код будет выглядеть так:
<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.
попробуйте отправить состояние в качестве реквизита для ребенка и получить к нему доступ от ребенка! или для прямого доступа к состоянию вы можете использовать редукционное хранилище или контекстный API из реакции!
<Route path = "/home" render = {()=><Home username = {this.state.username} />} />