React не может динамически отображать правильный компонент
Это мой App.js
class App extends React.Component {
constructor(props) {
super(props);
this.state = {loggedIn: true}
}
render() {
return (
<div>
<Helmet>
<meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1"/>
</Helmet>
<Wrapper state = {this.state.loggedIn}/>
</div>
)
}
}
Это передает состояние loggedIn компоненту оболочки. Эта оболочка динамически определяет, какой компонент визуализировать. Вот код оболочки,
class Wrapper extends React.Component {
render() {
const MainComp = this.props.state.loggedIn ? Logged : Unlogged;
return (
<BrowserRouter>
<div className = "wrapper">
<Header state = {this.props.state}/>
<MainComp state = {this.props.state}/>
</div>
</BrowserRouter>
);
}
}
Проблема в том, что даже если переменная loggedIn имеет значение false, отображается правильный компонент. Однако, когда я меняю его на true, он все равно продолжает отображать старый или неправильный компонент. Что я здесь делаю не так?
@EddieDelRio, вручную изменив значение переменной loggedIn с true на false.
Это не сработает. Вам нужно будет повторно визуализировать состояние с помощью this.setState
Можете ли вы включить образец кода о том, как вы его вручную меняете?
@EddieDelRio Я новичок в React, вы можете мне помочь, как это сделать?
Как я уже говорил, я просто вручную заменяю true на false.
Также передается состояние, а не состояние.
Вы передали не ту опору. Взгляните на внесенные мной изменения, и это должно решить проблему. В настоящее время this.props.state.loggedIn - это undefined, который всегда оценивается как false.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы передаете state = {this.state.loggedIn}, который будет истинным или ложным
но у вашего ребенка вы получаете this.props.state.loggedIn, который вообще не определяется, потому что state === loggedIn
class App extends React.Component {
constructor(props) {
super(props);
this.state = {loggedIn: true}
}
render() {
return (
<div>
<Helmet>
<meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1"/>
</Helmet>
<Wrapper state = {this.state}/>
</div>
)
}
}Вызовите конструктор со свойствами для вашего дочернего класса.
class Wrapper extends React.Component
{
constructor(props)
{
super(props);
}
render() {
const MainComp = this.props.state.loggedIn ? Logged : Unlogged;
return (
<BrowserRouter>
<div className = "wrapper">
<Header state = {this.props.state}/>
<MainComp state = {this.props.state}/>
</div>
</BrowserRouter>
);
}
}Итак, это работает, и правильный компонент отображается, но я также получаю Line 9: Useless constructor no-useless-constructor.
Странный. Что вы используете для компиляции?
Попробуйте удалить конструктор оболочки. Я не понимаю, почему это приведет к ошибке. Также отметьте как отвеченный, чтобы закрыть вопрос, если ваша проблема решена.
Как вы это меняете?