В моем приложении react native 0.59
есть 3 нижние вкладки с react navigation 3.7
.Вкладки Event
, Group
и Contact
.Event
- это начальная вкладка.
![enter image description here](https://i.stack.imgur.com/pugpW.jpg)
После начальной загрузки я нажимаю вкладку Group
, и на экране отображается следующее:
![enter image description here](https://i.stack.imgur.com/X3Tx3.jpg)
Показаны 2 группы HT и MKL.После того, как я щелкну одну группу, либо HT, либо MKL, она должна загрузить компонент Event
Проблема в том, что после нажатия на группу Event
никогда не загружается.На экране мониторинга приложений и серверов происходит сумасшедшая загрузка Event
и Group
без остановок.Экран застрял на Group
и перестает реагировать на любой щелчок.Я не имею ни малейшего представления об этом поведении, так как модуль Event
был полностью протестирован, а Group
был добавлен заново.
Вот код onPress в Group
модуле:
async _onPress(id) {
try {
console.log("saved group id in Group : ", id);
await helper.setMyValue("group_id", id.toString());
//update group_id in App.js
this.props.updateGroup(id); //<<<===this causes the problem
} catch (err) {
console.log("error in saving group_id to local disk", err);
};
this.props.navigation.goBack();
//this.props.navigation.navigate("Event"); //, {group_id:element1.id});
}
То, что делает вышеупомянутый onPress, - это сохранение пользователя id
, на которого нажали, и вызов updateGroup
для обновления group_id родителя.и вызовите goBack
, который является Event
компонентом.
* componentDidMount
в Event
:
async componentDidMount(){
this._isMounted = true;
if (!this.props.group_id) {
alert("Select a group");
return;
};
try {
//retrieving token
let result = this.state.token;
if (!result) {
result = await helper.getJwtToken();
if (this._isMounted) this.setState({
token: result
});
};
//console.log("secure store : ", result);
if (!result) {
this.props.navigation.navigate("Signup");
return;
};
this.refreshData(result);
//refresh data after goBack()
this.willFocusSubscription = this.props.navigation.addListener(
'willFocus', () => {
this.refreshData(result);
}
);
//get user
let myself = this.state.user;
if (!myself) {
myself = await helper._getUser(result.password, result.username);
if (this._isMounted) this.setState({
user: myself
});
};
console.log("out of did mount event", this.state);
}
catch (err) {
console.log("服务器错误(et),请再试一次!", err);
this.props.navigation.navigate.goBack(); //("Event");
return;
};
Вот вывод консоли приложения в Event
componentDidMount:
09-19 20:16:44.551 21659 21743 I ReactNativeJS: 'event url : ', 'http://192.168.2.133:3000/api/events/active?group_id=1&_group_id=1&_device_id=0cfce7b7e86fa397&_timezone=America%2FLos_Angeles'
09-19 20:16:44.552 21659 21743 I ReactNativeJS: 'out of did mount event', { activeEvents: [],
}
UPDATE:
Проблема вызвана this.updateGroup(id)
, который обновляет состояние group_id в App.js
updateGroup = (group_id) => {
if (this._isMounted) this.setState({group_id:group_id});
};
Он передается в Group
в качестве реквизита в App.js
:
const GroupWithSelf = (props) => (<Group {...props} myself={data.myself} token={data.result} updateGroup={this.updateGroup} updateToken={this.updateToken} />);
Не уверен, почему этот метод вызывает гонки.