状态更改时，抽屉导航不会更新

Question

我一直试图通过使用forceUpdate()来解决这个问题，但是当我尝试它时，没有发生任何事情。我仍然在学习反应本机，我刚刚尝试了life cycles反应原生。我试过的任何东西根本不起作用。

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>
          );
        }
      }

我设置它的方式是当用户登录时，它将在抽屉导航中显示他们的名字，个人资料图片和横幅。出于某种原因，当我退出时，前一个用户仍然在那里，但当前状态为空，它应该显示默认图像。

logout = () =>{

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

}