Data displayed in Reactjs not changing after first call to an endpoint

1

0

I have an app that displays data from an API in a list. When I start the server and sign in, the data is rendered to the client. If I were to sign in as another user with different data, the data from the previous user would be displayed as if the endpoint wasn’t being updated. I can see the the endpoint’s data is changing, but can’t understand why the new data isn’t being displayed. Any help would be appreciated, thank you in advance.

Here is the function that makes the GET request to the api endpoint. It is asynchronous and uses npm twit to consume the twitter API:

const returnNonfollowers = (screenName) => {

  T.get('followers/ids', { screen_name: screenName, count: 5000, stringify_ids: true }, function (err, data, response) {
    followers = data.ids; 

    T.get('friends/ids', { screen_name: screenName, count: 5000, stringify_ids: true }, function (err, data, response) {
      friends = data.ids;
      let difference = friends.filter(x => followers.toString().indexOf(x) == -1);

      T.get('users/lookup', { user_id: [difference[0], difference[1], difference[2], difference[4]] }, function (err, data, response) {
        router.get('/nonfollowers', async (req, res) => {
          res.send({ nonfollowers: data });
        })

      })

    })

  })
}

Here is the function being called when a user authenticates their twitter account:

passport.use(
  new TwitterStrategy(
    {
      consumerKey: keys.TWITTER_CONSUMER_KEY,
      consumerSecret: keys.TWITTER_CONSUMER_SECRET,
      callbackURL: "http://twitscouter.com/auth/twitter/redirect"
    },
    async (token, tokenSecret, profile, done) => {
      //console.log(profile._json.screen_name);

      returnNonfollowers(profile._json.screen_name);

      // Find current user in UserModel
      const currentUser = await User.findOne({
        twitterId: profile._json.id_str
      });
      // Create new user if the database doesn't have this user
      if (!currentUser) {
        const newUser = await new User({
          name: profile._json.name,
          screenName: profile._json.screen_name,
          twitterId: profile._json.id_str,
          profileImageUrl: profile._json.profile_image_url
        }).save();
        if (newUser) {
          done(null, newUser);
        }
      }
      done(null, currentUser);
    }
  )
);

Here is the client side fetch request:

componentDidMount() {

        fetch('/users/nonfollowers',
            {
                method: "GET",
                credentials: "include",
                headers: {
                    Accept: "application/json",
                    "Content-Type": "application/json",
                    "Access-Control-Allow-Credentials": true,
                }
            })
            .then(response => response.json())
            .then(data => {
                this.setState({
                    users: [
                        {
                            nonfollower: data.nonfollowers[0].screen_name,
                            profileImg: data.nonfollowers[0].profile_image_url
                        },
                        {
                            nonfollower: data.nonfollowers[1].screen_name,
                            profileImg: data.nonfollowers[1].profile_image_url
                        },
                        {
                            nonfollower: data.nonfollowers[2].screen_name,
                            profileImg: data.nonfollowers[2].profile_image_url
                        },
                        {
                            nonfollower: data.nonfollowers[3].screen_name,
                            profileImg: data.nonfollowers[3].profile_image_url
                        }
                    ]
                })
            });
    }

The data is rendered here (after the data is fetched this.setState changes updates the array and it is mapped to a list on the page. After the first fetch, it never updates again):

render() {
        let nameList = this.state.users.map(nonMoot => {
            return (
                <Container>
                    <List nonMoot={nonMoot} />
                </Container>
            )
        })
        return (
            <div className="main">
                    <Container>
                        These are the users that are not following you back
                        {nameList}
                    </Container>
            </div>
        )
    }