【发布时间】：2021-12-16 15:24:52
【问题描述】：
我有几个反应组件，这个问题专门指两个组件：UserDetails 和 User，在 UserDetails 中我正在渲染用户的朋友，他们每个人都是组件用户，所以当我点击他们的一个朋友时，在路由，用户 ID 正在改变，但实际上我正在渲染相同的组件：UserDetails，并且我正在获取该用户的数据但页面没有向上滚动，我可以以某种方式修复它吗？
这里是用户详细信息
import React, {useEffect, useState} from 'react';
import {useParams} from 'react-router-dom';
import { Link } from 'react-router-dom';
import User from './User';
import { useDispatch, useSelector } from 'react-redux';
import { setSelectedUser, removeUser, setSelectedUsersHistory, setUserFriends, setFriendsPage, setFriendsLoading } from '../redux/actions/actions';
import '../styles/UserDetails.css';
export const UserDetails = () => {
const selectedUser = useSelector(state => state.setSelectedUserReducer);
const selectedUsersHistory = useSelector(state => state.setSelectedUsersHistoryReducer);
const userFriends = useSelector(state => state.setUserFriendsReducer);
const friendsPage = useSelector(state => state.setFriendsPageReducer);
const friendsLoading = useSelector(state => state.setFriendsLoadingReducer);
const [dynamicId, setDynamicId] = useState('');
const dispatch = useDispatch();
const {userId} = useParams();
const fetchUserDetails = () => {
fetch(`${url}/${userId}`)
.then(res => res.json())
.then(data => {
dispatch(setSelectedUser(data));
setDynamicId(userId)
}
)
.catch(err => console.log('Error message: ', err))
}
const fetchUserFriends = () => {
dispatch(setFriendsLoading(true));
fetch(`${url}/${userId}/friends/${friendsPage}/15`)
.then(res => res.json())
.then(data => {
dispatch(setUserFriends( data.list.filter(el => {
return el.id.toString() !== userId
})))
})
.catch(err => console.log('Error message: ', err))
.finally(() => {
dispatch(setFriendsLoading(false))
})
}
useEffect(() => {
if(userId && userId!=='') fetchUserDetails();
return () => {
dispatch(removeUser())
}
}, [userId])
useEffect(() => {
fetchUserFriends()
}, [friendsPage])
const handleScroll = () => {
dispatch(setFriendsPage());
}
window.onscroll = function () {
if(window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {
handleScroll();
}
}
return (
<div className="userDetails">
{
Object.keys(selectedUser).length === 0 ? (
<div>Loading...</div>
) : (
<div className="user-about">
<div className="user-details-image">
<img src={selectedUser.imageUrl} alt="user-image" />
</div>
<div className="user-info">
<fieldset>
<legend>Info</legend>
<div className="row1">
<h3>
<span>{selectedUser.prefix} </span>
<span>{selectedUser.name} </span>
<span>{selectedUser.lastName} </span>
</h3>
</div>
<div className="row2">
<div className="personal-details">
<span className="email-label label">
Email:
</span>
<span> </span>
<span className="email-data">
{selectedUser.email}
</span>
</div>
<div className="personal-details">
<span className="ip-address-data label">
IP Address:
</span>
<span> </span>
<span className="ip-address-data">
{selectedUser.ip}
</span>
</div>
<div className="personal-details">
<span className="job-area-label label">
Job Area:
</span>
<span> </span>
<span className="job-area-data">
{selectedUser.jobArea}
</span>
</div>
<div className="personal-details">
<span className="job-type-label label">
Job Type:
</span>
<span> </span>
<span className="job-type-data">
{selectedUser.jobType}
</span>
</div>
</div>
</fieldset>
</div>
<div className="user-address">
<fieldset>
<legend>Address</legend>
<div className="address-info">
<h3>
<span>{selectedUser.company.name}</span>
<span>{selectedUser.company.suffix}</span>
</h3>
<div className="personal-details">
<span className="city-label label">
City:
</span>
<span> </span>
<span className="city-data">
{selectedUser.address.city}
</span>
</div>
<div className="personal-details">
<span className="country-label label">
Country:
</span>
<span> </span>
<span className="country-data">
{selectedUser.address.country}
</span>
</div>
<div className="personal-details">
<span className="state-label label">
State:
</span>
<span> </span>
<span className="state-data">
{selectedUser.address.state}
</span>
</div>
<div className="personal-details">
<span className="street-label label">
Street Address:
</span>
<span> </span>
<span className="street-data">
{selectedUser.address.streetAddress}
</span>
</div>
<div className="personal-details">
<span className="zip-label label">
ZIP:
</span>
<span> </span>
<span className="zip-data">
{selectedUser.address.zipCode}
</span>
</div>
</div>
</fieldset>
</div>
</div>
)
}
<div className="friends-list">
{
userFriends ? (
userFriends.map((friend, index) => (
<Link key={friend.id} to={`/user/${friend.id}`}>
<User name={friend.name} lastName={friend.lastName} prefix={friend.prefix} title={friend.title} img={`${friend.imageUrl}/${friend.id}`}/>
</Link>
))
) : (
<div> Loading... </div>
)
}
{
friendsLoading ? <h1>Loaidng...</h1> : ''
}
</div>
</div>
)
}
export default UserDetails;
这是用户组件：
import React, {useEffect} from 'react';
import '../styles/User.css';
const User = ({name, lastName, prefix, title, img}) => {
return (
<div className="user">
<div className="user-image">
<img src={`${img}/${Math.random()}`} alt="user-image" />
</div>
<div className="user-name">
<span>{prefix} </span>
<span>{name} </span>
<span>{lastName} </span>
</div>
<div className="user-position">
<span>{title}</span>
</div>
</div>
)
}
export default React.memo(User);
【问题讨论】：
-
不幸的是，我的问题是，我正在渲染相同的组件，但在 url 中只有 id 正在改变
标签： javascript reactjs