REACTJS .join() не работает в app.js, но работает в других компонентах .js. ОШИБКА: TypeError: невозможно прочитать свойство «join» неопределенного
Я пытаюсь изменить значок с fontawesome через объект состояния, где я сохраняю имена классов и меняю их одним щелчком мыши.
у меня такое состояние
infoMobile: ["fas", "fa-info-circle", "info_mobile"],
и у меня есть эта функция, где я меняю InfoMobile
openAboutContactMob = () => {
const {navKlasa} = this.state;
navKlasa.push("mobile_remove");
this.setState({navKlasa: navKlasa});
var {infoMobile} = this.state;
infoMobile = ["fas", "fa-times-circle", "info_mobile"];
this.setState({infoMobile: infoMobile});
}
все это находится в файле app.js, также в ответ я использую его так
<div className = "mobile_nav_bckg"><i onClick = {this.openAboutContactMob} className = {this.infoMobile.join(' ')}></i></div>
когда я нажимаю на значок, я хочу изменить классы, поэтому значок меняется, но я получаю сообщение об ошибке:
TypeError: Cannot read property 'join' of undefined
Это может быть очевидно, но я новичок в этом, поэтому любой совет подойдет, спасибо
Ответы 2
Я думаю, вы забыли указать состояние ссылки. Попробуйте className = {this.state.infoMobile.join('')}
Вам нужно ссылаться на состояние
<div className = "mobile_nav_bckg"><i onClick = {this.openAboutContactMob} className = {this.state.infoMobile.join(' ')}></i></div>
См. this.state.infoMobile вместо this.infoMobile
Это потому, что setState (используется здесь) this.setState({infoMobile: infoMobile}); — это функция, которую React предоставляет для обновления состояния.
Другое дело, что нет необходимости ссылаться на ваше предыдущее состояние, как вы делаете это здесь.
var {infoMobile} = this.state;
infoMobile = ["fas", "fa-times-circle", "info_mobile"];
this.setState({infoMobile: infoMobile});
Вы можете напрямую установить его
this.setState({infoMobile: ["fas", "fa-times-circle", "info_mobile"] });
вам, вероятно, следует проверить свое текущее состояние и установить другое. Не ссылайтесь на состояние напрямую, используйте формат обратного вызова для функции setState. this.setState(prevState => /** check prevState and return new one based on that */)
Спасибо за твой ответ. Еще один вопрос, пока мы на нем, как лучше всего переключаться между двумя состояниями (один будет классом с «fa-times-circle», а другой с «fa-info-circle». Я хочу это произойдет в тот же клик. @Gonzalo.-