Question

根据这些链接React Native Component Lifecycle和Component Lifecycle，应在componentWillMount方法之前调用render方法，但在我的项目中并非如此。我正在fetch内进行componentWillMount操作，但是当这样做时，render方法会在componentWillMount完成之前被调用。这是我的班级：

class UserHomeScreen extends Component {
 state = { userID: '' };
 componentWillMount(){
     AsyncStorage.getItem('userId').then((value) => {
         this.setState({ userID: value });
         const API_ENDPOINT= 'https://myserverAPI';
         const userID = value;
         fetch(API_ENDPOINT,{ method: "GET",
             headers:{
                 'Authorization': 'Bearer '+ userID
             }
         })
             .then((response) => response.json())
             .then((responseJson) => {
                 console.log(responseJson);
                 userInfo = new UserInfo();
                 userInfo.updateValues(responseJson);
                 AsyncStorage.setItem("userInfo",JSON.stringify(userInfo),null);
                 backInfo = AsyncStorage.getItem("userInfo").then(value);
             })

     });
 }

 render(){

     return(
         <Text>hello { this.state.userID }
         </Text>
     )
 }

}

Answer 1

他们以生命周期的正确顺序被调用。您的问题出在!git pull，因为Fetch API返回的fetch不同步。如果在promise中设置状态，可以通过强制重新渲染来解决此问题。

Promise

或强制等待this.setState({mode = 'loading'}) API.fetch().then(this.setState({mode = 'finished'})); // pseudo code。我会选择一个并在你的渲染方法中设置一个占位符，例如

Promise

React Native Component生命周期方法未按正确顺序调用

1 个答案: