Как получить ребенка в массиве this.state
Я получаю некоторые пользовательские данные из безопасного хранилища и пытаюсь поместить их в this.state, а затем отображать элементы в отдельных текстовых полях. Так, например:
Имя: Марк
Фамилия: лол
Когда я отображаю this.state.UserData, он печатает все данные массива, но я хочу получить доступ только к его дочернему элементу. Как я могу это сделать?
constructor(props){
super(props)
this.state = {
UserData: ''
}
}
componentWillMount() {
SecureStore.getItemAsync('userData')
.then((data) => {
this.setState({ UserData: data })
});
}
render() {
return (
<View style = {{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>
{this.state.UserData['FirstName']}<-- not doing anything
</Text>
</View>
);
}
Функция безопасного хранения:
userLogin = () =>{
const {Email, passWord} = this.state;
if (Email !== "" && passWord !== ""){
fetch('', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '',
'Access-Control-Allow-Methods': 'POST',
'Access-Control-Max-Age': '3600',
'Access-Control-Allow-Headers': 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With'
},
body: JSON.stringify({
action: 'login',
email: Email,
password: passWord
})
})
.then((response) => response.json())
.then((responseJson) => {
//console.info(responseJson);
if (responseJson !== "" && responseJson !== '0'){
Alert.alert(
'Succes',
'ingelogd!',
[
{text: 'OK', onPress: () => console.info('OK Pressed')},
],
{ cancelable: false }
)
try {
SecureStore.setItemAsync('userData', JSON.stringify(responseJson));
} catch (error) {
alert('Er ging iets mis, probeer het later opnieuw ' . error);
}
}
}
Кроме того, будет полезно, если вы установите начальное состояние UserData как объект, а не строку.
Хорошо, я добавил код магазина. И как я могу изменить его на объект, а не на строку. Состояние по умолчанию является строкой, не так ли?
Ответы 1
Причина, по которой у вас возникла проблема, заключается в том, что SecureStore сохраняет только строки. Вы совершенно правильно использовали JSON.stringify для преобразования объекта в строку, чтобы вы могли его сохранить, однако вам нужно преобразовать его обратно в объект.
Вы можете использовать JSON.parse, чтобы преобразовать вашу строку обратно в объект.
constructor(props){
super(props)
this.state = {
UserData: {} // update this to an object
}
}
componentWillMount() {
SecureStore.getItemAsync('userData')
.then((data) => {
let UserData = JSON.parse(data) // you need to parse the string to json
console.info(UserData); // you probably want to check what you have gotten back
this.setState({ UserData: UserData }) // then save the object to state
});
}
Теперь, пока у вашего объекта есть ключи Firstname и Lastname, вы сможете получить к ним доступ следующим образом.
this.state.UserData.Firstname
this.state.UserData.Lastname
Ты жжешь! Спасибо за разъяснение, я многое узнал о том, что такое объекты и как их теперь использовать.
Можете ли вы показать код, в котором вы храните пользовательские данные в SecureStore?