0

I've been trying to solve this by using forceUpdate(), but I when I tried it nothing really happened. I am still learning react native and I just experimented life cycles of react native. Anything I tried didn't work at all.

class DrawerScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shadowOffsetWidth: 1,
      shadowRadius: 4
    };
    AsyncStorage.getItem("username").then((value) => {
      this.setState({
        "username": value
      })
    });
  }
  saveData(value) {
    AsyncStorage.setItem("username", value);
    this.setState({
      "username": value
    });
  }

  componentDidUpdate() {


    return fetch(`http://www.example.com/user-profile.php?username=${this.state.username}`, {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        }

      })
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          dataSource: responseJson,
          images: responseJson[0].user_images
        }, );
        return responseJson;
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
      return (

        <
        Container >
        <
        Content bounces = {
          false
        }
        style = {
          {
            flex: 1,
            backgroundColor: "#fff",
            top: -1
          }
        } >
        {
          this.state.username != null ?
          <
          FlatList

          data = {
            this.state.dataSource
          }

          ItemSeparatorComponent = {
            this.FlatListItemSeparator
          }


          renderItem = {
            ({
              item
            }) => < View >

            <
            Image source = {
              {
                uri: `http://www.example.co,/img/${item.banner}`
              }
            }
            style = {
              styles.drawerCover
            }
            /> <
            Image square style = {
              styles.profileImage
            }
            source = {
              {
                uri: `http://www.example.com/img/${item.profile}`
              }
            }
            /> <
            Text style = {
              styles.nameText
            } > {
              item.first_name
            } {
              item.last_name
            } < /Text>

            <
            /View>


          }
          keyExtractor = {
            (item, index) => index
          }
          /> :
            <
            View >
            <
            Image source = {
              drawerCover
            }
          style = {
            styles.drawerCover
          }
          /> <
          Image square style = {
            styles.drawerImage
          }
          source = {
            drawerImage
          }
          /> <
          /View>
        } <
        List dataArray = {
          datas
        }
        renderRow = {
          data =>
          <
          ListItem
          button
          noBorder
          onPress = {
            () => this.props.navigation.navigate(data.route)
          } >
          <
          Left >
          <
          Icon
          active
          name = {
            data.icon
          }
          style = {
            {
              color: "#777",
              fontSize: 26,
              width: 30
            }
          }
          /> <
          Text style = {
            styles.text
          } > {
            data.name
          } <
          /Text> <
          /Left> {
            data.types &&
              <
              Right style = {
                {
                  flex: 1
                }
              } >
              <
              Badge
            style = {
                {
                  borderRadius: 3,
                  height: 25,
                  width: 72,
                  backgroundColor: data.bg
                }
              } >
              <
              Text
            style = {
                styles.badgeText
              } >
              {
                `${data.types} Types`
              } < /Text> <
              /Badge> <
              /Right>} <
              /ListItem>} /
              >
              <
              /Content> <
              /Container>
          );
        }
      }

The way I have it set it up is when a user logs in, then it will display their name,profile picture, and banner in the drawer navigation. For some reason, when I log out, the previous user is still there, but the current state is empty and it should display a default image.

logout = () =>{

    this.setState({"username": null});
  this.props.navigation.navigate('HomeScreen');

}
Laney Williams
  • 573
  • 3
  • 13
  • 34
  • the first thing you should check is whether your drawer actually rerender itself after you have logged out. – Mox Mar 01 '18 at 12:54
  • Another thing that i would like to point out, when the user log out, did you set this.state.username to null? or is it just empty string? – Mox Mar 01 '18 at 12:57
  • @Mox just an empty string. How would I go about setting it to null or which one should I do? – Laney Williams Mar 01 '18 at 13:53
  • @Mox also, I feel like the drawer doesn't actually rerender because the images does not change after a new user is logged in. Not until I reload the app. – Laney Williams Mar 01 '18 at 13:54
  • In your code, you actually checked for null instead of empty string, so perhaps that is why it didnt update. – Mox Mar 01 '18 at 14:34
  • 1
    @ah ok. What about when I switch users? Is there a way to rerender once that user is logged in? Or perhaps, force the app to reload? – Laney Williams Mar 01 '18 at 15:37
  • the reason why it didnt rerender is because the way you cleared the state. did you use setstate to clear the username? using forceUpdate is against the react's philosophy – Mox Mar 01 '18 at 23:45
  • @Mox I used `asyncstorage.clear()` to clear the username. This is how I log out the user. – Laney Williams Mar 02 '18 at 02:59
  • ok that is why it didn't rerender, you have to use the setState method to set your username to null. this will automatically cause a rerender on the component. You may also want to consider using redux for state management. – Mox Mar 02 '18 at 03:14
  • I would like to point you to this discussion https://stackoverflow.com/questions/24718709/reactjs-does-render-get-called-any-time-setstate-is-called – Mox Mar 02 '18 at 03:22
  • @Mox I updated my code above, is this how I would go about logging out a user instead of using `asyncstorage.clear`? Also thank you for the discussion. – Laney Williams Mar 02 '18 at 03:32
  • yes that is how you should set the username, I am assuming that logout function is in the drawer component. – Mox Mar 02 '18 at 03:34
  • No, it is location in the profile page for now. But for some reason, the drawer navigation is still not updating until I reload the app. – Laney Williams Mar 02 '18 at 03:41
  • in the logout function, this.setState() will refer to the states that the component it is in, since it is in profile page component, it will refer to the states in that component. So without redux, one way to do it is through the props of drawer, pass the this.state.username from profile page to the drawer component. so that whenever the username is updated in the profile page, it will trigger a rerender on the drawer component. – Mox Mar 02 '18 at 03:44
  • @Mox wow, I didn't think about it that way. May you help me with how that would look, if you don't mind? – Laney Williams Mar 02 '18 at 03:49

0 Answers0