I am trying to render my Users api data, through variable contact in ProfileComponent, but variable contact isn't assigning to the item data. When I console.log(data), it responds with all the information, such as profile_picutre, banner_picture, first_name, ect, which is what I need. I know I'm close but I don't understand why the contact varible isn't grabbing the data item.

I think my problem would be solved if I can get item together with newContact, but I don't know. Also sorry if my question is bare, I'm still trying to learn all the react native terminologies. If someone could help point me in the right direction, I would greatly appreciate that.

PS: I'm using axios to fetch my api, and using useContext to store my user, with my provider.

const ProfileScreen = () => {
  const {params: {item = {}} = {}} = useRoute();

  const {
    contactsDispatch,
    contactsState: {
      getProfile: {data, loading, error},
    },
  } = useContext(GlobalContext);

  useEffect(() => {
    getProfile()(contactsDispatch);
  }, []);



  const contactsRef = useRef([]);
  const prev = contactsRef.current;
  contactsRef.current = data;
  const newList = contactsRef.current;
  const newContact = newList.find(
    (item) => !prev.map((i) => i.id).includes(item.id),
  );

  console.log(data)

  return (
    <ProfileComponent
      data={data}
      loading={loading}
      contact={data}
    />
  );
};

export default ProfileScreen;

const ProfileComponent = ({
  contact,
  ...,
  ...,

}) => {

  const {
    profile_picture,
    banner_picture,
    first_name,
    phone_number,
    last_name,
    bio,
    username,
    file,
    caption,
  } = contact;

    return(
    ...
    )
)}

CodePudding user response：

contactsRef.current must be a NodeElement.

Considering data is a NodeElement:

Objects coming from context start as undefined, so you need to check them first:

  useEffect(() => {
    
    if(getProfile != undefined && contactsDispatch != undefined) {
        getProfile()(contactsDispatch);
    }
    
  }, [contactsDispatch, getProfile]);