My Profile.js component is responsible for fetching activity data related to a specific user from the URL parameter and updating the profileActivity state. This state is then passed down to my child component, ProfileActivity.js, where it should be displayed.
However, I'm facing an issue where the newly fetched data in ProfileActivity.js does not render immediately and only shows up after interacting with the page, such as clicking a button.
I've attempted to use the spread operator when setting the profileActivity state to ensure immutability, but this doesn't seem to resolve the problem. It's possible that I may have missed something in implementing this approach correctly. Additionally, I tried using the key={} attribute on the component without success.
What steps should I take to trigger an update in ProfileActivity.js as soon as setProfileActivity(activity) is called with the new data?
Within Profile.js:
function Profile(props) {
const {parameter1} = props.match.params;
const [profileViewing, setProfileViewing] = useState(null);
const [profileDetails, setProfileDetails] = useState(null);
const [profileActivity, setProfileActivity] = useState(null);
const [loading, setLoading] = useState(true);
// When URL parameters change, determine which profile to show
useEffect(() => {
if(parameter1) {
setProfileViewing(parameter1);
}
}, [props, parameter1]);
// When the profile being viewed (profileViewing state) changes, fetch and store the viewed profile's details and activity
useEffect(() => {
async function fetchProfileDetailsAndActivity(username) {
try {
const profile = await getUserDetailsFromUsername(username);
setProfileDetails(profile);
const activity = await
getActivityArray(profile.latestActivity);
setProfileActivity(activity);
} catch(error) {
// Handle error
}
}
if(profileViewing) {
fetchProfileDetailsAndActivity(profileViewing);
}
}, [profileViewing])
// If profileDetails and profileActivity are no longer null, set loading to false
useEffect(() => {
if(profileDetails && profileActivity) {
setLoading(false);
}
}, [profileDetails, profileActivity])
return(
<div className="Profile">
<main>
<div className="wrap">
<div className="dual-right">
<ProfileActivity profileDetails={profileDetails} profileActivity={profileActivity} loading={loading}/>
</div>
</div>
</main>
</div>
)
}
export default Profile;
In ProfileActivity.js:
const ProfileActivity = (props) => {
const getActivityList = () => {
let listItems = [];
for(let i = 0; i < props.profileActivity.length; i++) {
console.log(props.profileActivity[i])
listItems.push(
<p key={props.profileActivity[i].id}>Item {props.profileActivity[i].id}</p>
)
}
return listItems;
}
if(props.loading) {
return(
<div className="box">
<h3>Latest Activity</h3>
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</div>
)
} else {
return(
<div className="box">
<h3>Latest Activity</h3>
<ul>
{getActivityList()}
</ul>
</div>
)
}
}
export default ProfileActivity;
An example of the data returned from getUserDetailsFromUsername('somename'):
{ createdOn: it {
seconds: 1635703629,
nanoseconds: 60000000
},
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="285b47454d4649454d68494c4c5a4d5b5b064b4745">[email protected]</a>",
latestActivity: [
0: "FEnZZBcQph0oPtoOQErQ"
1: "PuRQVS1OuRQNv42wCrlk" ],
username: "somename" }
I pass the latestActivity array to getActivityArray(array), which takes the array of reference IDs, searches another database with them, compiles richer details into a new array, and returns it. Here is an example of the returned array with 1 activity:
[{ date: 1636129735609,
refs: { artist: "Rihanna"
songID: "Gt8xVxzc9badIuEy0td1"
title: "Umbrella" },
type: 'addSong',
uid: 'ZvDymG7poeNw8MmIaA2hIONInA83',
id: 'FEnZZBcQph0oPtoOQErQ' }]