#react-native #api
#react-native #API
Вопрос:
Мне нужно получить идентификатор пользователя из API, а затем прикрепить его к переменной maybe, чтобы я мог экспортировать его, а затем использовать как значение в другом объекте. Может кто-нибудь помочь мне с примером, как я могу это сделать? Я застрял только при отображении его на консоли.
Вот мой код:
class LoginScreen extends Component {
constructor(){
super();
this.state = {
email: '',
password: '',
id: 0,
result: false,
}
}
_userLogin() {
let email = this.state.email;
let password = this.state.password;
if (email amp;amp; password) {
fetch("https://URL/api/login", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email,
password: password,
})
})
.then((response) => {
if(response.status !== 200) {
throw new Error('The given data was invalid.')
}
return response.json();
})
.then((responseData) => {
this.renderResults(responseData)
console.log(responseData)
this.props.navigation.navigate('IntroScreen');
})
.catch((err) => console.log(err.message))
}
}
componentDidMount () {
fetch("https://URL/api/login", {
method: "GET",
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({getId: responseJson});
console.log(responseJson.data.id);
const id = responseJson.data.id;
})
.catch((error) => {
console.error(error);
});
}
renderResults = (responseData) => {
if(responseData){
this.setState({
result: true
})
}
}
handleEmail = (text) => {
this.setState({ email: text })
}
handlePassword = (text) => {
this.setState({ password: text })
}
errorMessage = () => {
Alert.alert(
'Error',
'The given data was invalid.',
[
{
text: "OK",
style: "cancel"
},
],
{ cancelable: false }
)
}
render() {
return (...)
После того, как я прикреплю его к переменной, я хочу использовать его в другом объекте, например:
class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
currentDate: new Date(),
markedDate: moment(new Date()).format("YYYY-MM-DD"),
isLoading: true,
id: 1, <------- HERE
name: '',
floor: 0
};
}
Комментарии:
1. Вы можете использовать redux или использовать одноэлементный класс, сохранить его там и использовать везде в своем приложении.
2. Как я могу это сделать с помощью class. Я уже пробовал, но этого не произошло
Ответ №1:
Вот краткий фрагмент кода для устранения вашей проблемы.
Создайте одноэлементный класс, gloablParams.js например, следующее
class GlobalParams {
constructor() {
this.id = null;
}
userId = (id)=>{
if(!id) return this.id;
this.id = id;
}
}
const instance = new GlobalParams()
export default instance;
Теперь LoginScreen
вы можете импортировать его следующим образом
import gp from './gloablParams';
Теперь вызовите эту функцию после успешного входа в систему, я думаю componentDidMount
, что это или _userLogin
и укажите идентификатор для его сохранения.
componentDidMount() {
fetch("https://URL/api/login", {
method: "GET",
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({ id: responseJson.data.id });
gp.userId(responseJson.data.id); //save it here
console.log(responseJson.data.id);
})
.then(gp.userId(id))
.catch((error) => {
console.error(error);
});
}
Теперь вы можете импортировать его таким же образом, как я писал выше, и получить доступ к идентификатору пользователя из той же функции, но без аргументов
gp.userId() //without any arguments
Комментарии:
1. как насчет чего-то подобного snack.expo.io/PpcPE2p !r а затем — импортируйте userId из ‘./ des’ и используйте его как id:userId
2. Нет, это неправильный способ его реализации. Кода, который я опубликовал, должно быть достаточно, если вы правильно введете его на свои экраны.
3. Но у меня ничего не отображается, когда я делаю это так snack.expo.io/8dgOwi8Wq даже я вставил ‘id’ в ()
4. Ваш рабочий стол смонтирован до LoginScreen?
5. Нет, после LoginScreen