Uncaught TypeError: Cannot read property '_' of undefined

[chin14]

This is my first time posting a problem here, so if I'm doing something wrong, sorry!
I'm getting this error and I don't quite get it.

Here I am again with a problem I can't solve ! I'm getting this error and I don't quite get it.

enter image description here

After opening the DOM and reading the whole error and a lot of hours spend on Google, the only thing I got was that it looks like the error is triggered by this line of code:

const [user, setUser] = useState(null)
This is the Code where this line is :

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, Image, FlatList } from 'react-native';
import { connect } from 'react-redux';

import firebase from 'firebase';
require('firebase/firestore');

function Profile(props) {
  const [userPosts, setUserPosts] = useState([]);
  const [user, setUser] = useState(null);

  useEffect(() => {
    const { currentUser, posts } = props;
    console.log({ currentUser, posts });

    if (props.route.params.uid === firebase.auth().currentUser.uid) {
      setUser(currentUser);
      setUserPosts(posts);
    }
  });

  if (user === null) {
    return <View />;
  }
  return (
    <View style={styles.container}>
      <View style={styles.containerInfo}>
        <Text> {user.name} </Text>
        <Text> {user.email} </Text>
      </View>
      <View style={styles.containerGallery}>
        <FlatList
          numColumns={3}
          horizontal={false}
          data={userPosts}
          renderItem={({ item }) => (
            <View style={styles.containerImage}>
              <Image style={styles.image} source={{ uri: item.downloadURL }} />
            </View>
          )}
        />
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 40,
  },
  containerInfo: {
    margin: 20,
  },
  containerGallery: {
    flex: 1,
  },
  containerImage: {
    flex: 1 / 3,
  },
  image: {
    flex: 1,
    aspectRatio: 1 / 1,
  },
});

const mapStateToProps = (store) => ({
  currentUser: store.userState.currentUser,
  posts: store.userState.posts,
});

export default connect(mapStateToProps, null)(Profile);

I'm making an Instagram Clone and if you need any other code I have, please tell me because I don't know what you all need to help me.

[jgonggrijp]

Welcome to the issue tracker, @chin14. It is OK to be new.

The error message means that somewhere, there is a line being executed that contains an expression that looks like something._, and something happens to be undefined at that point. This might be related to the Underscore library but it also might not.

How did you reach the conclusion that the error is triggered inside the const [user, setUser] = useState(null); line? Assuming you are right about this, the line throwing the error must be somewhere inside React or in one of React's dependencies.

You can pinpoint the exact location of the problem by stepping through your code with a debugger. This should enable you to identify what something should have been, which in turn might hint at a solution. If the problem is actually a bug in React, you might even be able to solve it by just upgrading React to the next patch or minor version.

Please try stepping with the debugger and then let us know what you found.

[chin14]

Thanks! @jgonggrijp

I never really used a debugger, and this is also my first React project.

My conclusion is based on the error message I got, there is a part where it says this is a part of the error. I figured that could be it. Maybe I'm wrong, I really don't know, haha. Anyway I tried a lot of things, I also removed this line of code:

  if (props.route.params.uid === firebase.auth().currentUser.uid) {
      setUser(currentUser);
      setUserPosts(posts);
    }

Now the error is gone, but I don't know how to replace this line.

Thanks for the Link, I will look into it and maybe start using debugger.

[jgonggrijp]

If removing those lines silences the error, that seems to suggest the problem is somewhere in those lines (i.e., either in firebase.auth(), setUser(currentUser) or setUserPosts(posts)). I don't know how to replace those lines (or whether you should even replace them at all), because I never use React, but when you step with a debugger, you might want to set your breakpoint just before those lines to see what is going on.

[jgonggrijp]

@chin14 Did you find out what was causing the problem? Did it have anything to do with Underscore?