Я пытаюсь реализовать свою функцию рендеринга, чтобы она ждала, пока я закончу либо очистку данных из Интернета (если AsyncStorage его не имеет), либо извлеку их из AsyncStorage, но я борюсь с аспектом обещания:
render() {
let pic = {
uri: 'https://i.imgur.com/G19Jnuj.jpg'
};
this.renderAttributes()
.then((response) => {
console.log("finished val: " + this.state.name);
console.log("finished response: " + response);
return (
<View style={shared.basicView}>
<Image source={pic} style ={styles.circleImage}/>
<Text style={styles.infoText}>{this.state.name}</Text>
<Text style={styles.titleText}>Bio</Text>
<Text style={styles.infoText}>blah blah</Text>
<Text style={styles.titleText}>Email</Text>
<Text style={styles.infoText}>blah blah</Text>
<Text style={styles.titleText}
onPress={() => this.props.navigation.navigate('Repositories')}>
Public Repos Count</Text>
<Text style={styles.infoText}>3</Text>
<Text style={styles.titleText}
onPress={() => this.props.navigation.navigate('Followers')}>
Follower Count</Text>
<Text style={styles.infoText}>0</Text>
<Text style={styles.titleText}
onPress={() => this.props.navigation.navigate('Following')}>
Following Count</Text>
<Text style={styles.infoText}>0</Text>
<Text style={styles.titleText}>Profile Created</Text>
<Text style={styles.infoText}>November 2015</Text>
</View>
)
})
.catch((error) => {
console.log("Profile creation failed: " + error);
return(null);
})
}
Остальная часть класса и функция renderAttributes определены следующим образом:
class ProfileScreen extends Component {
state: any;
constructor(props) {
super(props);
this.state = {
name: '',
bio: '',
email: '',
repoCount: '',
followerCount: '',
followingCount: '',
profileCreated: ''
};
this.renderAttributes = this.renderAttributes.bind(this);
}
async renderAttributes() {
console.log("inside ga");
let jsonData=null;
try {
axios.get('https://api.github.com/users/dummy')
.then(async (response) => {
console.log("Response: " + JSON.stringify(response));
jsonData=response;
console.log("jsonData: " + JSON.stringify(jsonData));
const nameVal = await AsyncStorage.getItem('name');
if(nameVal !== null) {
console.log("name val: " + nameVal);
this.setState({name: nameVal});
}
else {
try {
await AsyncStorage.setItem('name', jsonData.data.name);
}
catch (error) {
console.log("Set name error: " + error);
}
if(jsonData.data.name == null) {
this.setState({name: 'n/a'});
}
else {
console.log("name: " + jsonData.data.name);
this.setState({name: jsonData.data.name});
}
}
const bio = await AsyncStorage.getItem('bio');
if(bio !== null) {
this.setState({bio: bio});
}
else {
try {
await AsyncStorage.setItem('bio', jsonData.data.bio);
}
catch (error) {
console.log(error);
}
if(jsonData.data.bio == null) {
this.setState({bio: 'n/a'});
}
else {
this.setState({bio: jsonData.data.bio});
}
}
// etc for each attribute in state
})
.catch((error) => {
console.log('Error fetching: ' + error);
});
}
catch (error) {
console.log('Error creating attributes: ' + error);
}
}
(Извините за все мои заявления console.log). Мне кажется, что это должно либо возвращать значение null, либо возвращать представление, несмотря ни на что, но я продолжаю получать сообщение об ошибке "Invariant Violation: ProfileScreen(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."
. Ни один из моих операторов catch не запускается. Я честно сбит с толку; есть две вещи, которые я заметил, хотя они могут быть виновниками: 1. моя IDE выделяет this.state.name как неразрешенное имя переменной, 2. я явно не определил промис внутри renderAttributes
(должен ли я?) . Кроме того, основываясь исключительно на операторах печати, кажется, что вещи внутри this.renderAttributes().then(response)
печатаются до axios.get.then()
; не уверен, что это отвлекающий маневр. Какие-либо предложения?
renderAttributes
изrender
и просто вернуть представление сthis.state.<attributeName>
в качестве значений моих элементов. Затем вcomponentDidMount
я должен вызватьrenderAttributes
, что вызовет «переоценку» рендеринга с обновленными значениями состояния? 27.03.2018componentWillMount
был бы лучшей идеей, на самом деле 27.03.2018