我有一个具有ID的页面，如果我通过具有另一个ID的链接https://localhost:8443/news/10转到同一页面，则该页面不会更新道具和状态，并且该页面看起来与刷新之前的页面完全相同。我认为这是因为我不更改redux中的状态和道具。
NewsPageItem
import React, { useEffect } from 'react';
import { Link, useHistory } from 'react-router-dom';
import Comments from './../shared/Comments/Comments';
import Container from 'common/Container/Container';
import NewsItem from '../../shared/NewsItem/NewsItem';
import NewEntity from '../../../models/entity/NewEntity';
import Svg from 'common/Svg';
import ava from './author.png';
import bg from '../img.png';
import './NewsPageItem.scss';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import {
getComments,
getList,
getNewId,
newsByIdSelector,
newsCommentsSelector,
newsListSelector,
sentComment,
setLike,
setView,
} from 'ducks/news';
import Swipe from 'shared/Swipe/Swipe';
const NewsPageItem: React.FC = () => {
const history = useHistory();
const dispatch = useDispatch();
const newById = useSelector(newsByIdSelector, shallowEqual);
const comments = useSelector(newsCommentsSelector, shallowEqual);
let news = useSelector(newsListSelector, shallowEqual);
const id = history.location.pathname.split('/')[2];
console.log(id);
const { likes_count, views_count } = newById;
news = news.filter((elem: any) => elem.id !== Number(id));
useEffect(() => {
dispatch(getNewId(id));
dispatch(getList());
dispatch(setView(id));
dispatch(getComments(id));
}, [newById.likes_count, newById.views_count]);
const handleLike = () => {
dispatch(setLike(id));
};
const sendMsg = (text: string) => {
dispatch(sentComment(id, text));
};
console.log(444);
return (
<div className="news__page">
<div className="news__header" style={{ backgroundImage: `url(${bg})` }}>
<Link to="/news" className="news__back">
<Svg name="arrow_back" width={26} height={20} className="news__svg" />
</Link>
<div className="news__wrap">
<div className="news__title">Технические работы на нашем сайте</div>
<div className="news__author">
<div className="news__author--img">
<img src={ava} alt="Алёна Малюченко" />
</div>
<div className="news__author--info">
<div className="news__author--name">Алёна Малюченко</div>
<div className="news__author--cat">Автор новости</div>
</div>
</div>
<div className="news__stats">
<div className="news__icon">
<Svg name="calendar" width={15} height={16} className="news__svg" />
15 декабря
</div>
<div className="news__icon">
<Svg name="info" width={16} height={16} className="news__svg" />
Новость
</div>
<div className="news__icon">
<Svg name="time" width={10} height={16} className="news__svg" />2 мин.
</div>
</div>
</div>
</div>
<div className="news__content content">
<Container>
<h3>Заголовок новости</h3>
<p>
Практический опыт показывает, что консультация с профессионалами из IT создаёт предпосылки
качественно новых шагов для модели развития? Разнообразный и богатый опыт курс на
социально-ориентированный национальный проект способствует подготовке и реализации
соответствующих условий активизации. Равным образом консультация с профессионалами из IT требует
определения и уточнения дальнейших направлений развитая системы массового участия.
</p>
<p>
Таким образом, повышение уровня гражданского сознания позволяет оценить значение всесторонне
сбалансированных нововведений. Задача организации, в особенности же начало повседневной работы
по формированию позиции способствует подготовке и реализации дальнейших направлений развитая
системы массового участия. Дорогие друзья, постоянный количественный рост и сфера нашей
активности создаёт предпосылки качественно новых шагов для системы обучения кадров,
соответствующей насущным потребностям. С другой стороны начало повседневной работы по
формированию позиции обеспечивает широкому кругу специалистов участие в формировании системы
обучения кадров, соответствующей насущным потребностям!
</p>
<div className="news__info">
«Не следует, однако, забывать о том, что рамки и место обучения кадров напрямую зависит от
направлений прогрессивного развития»
</div>
<h3>Значимость этих проблем настолько очевидна:</h3>
<ul>
<li>Реализация намеченного плана развития влечет за собой процесс внедрения</li>
<li>Модернизации существующих финансовых и административных условий</li>
<li>Значимость этих проблем настолько очевидна</li>
</ul>
<div className="news__stats">
<div className="news__icon" onClick={handleLike}>
<Svg name="heart" width={24} height={24} className="news__svg" />
{likes_count}
</div>
<div className="news__icon">
<Svg name="comment" width={20} height={20} className="news__svg" />
15
</div>
<div className="news__icon">
<Svg name="view" width={20} height={20} className="news__svg" />
{views_count}
</div>
</div>
</Container>
</div>
<div className="other__news">
<div className="other__wrap">
<Swipe title={'Другие новости'} link="/news">
<div className="mobile-page--history">
{news.map((item, key) => (
<NewsItem key={key} item={item as NewEntity} classname="other__item" />
))}
</div>
</Swipe>
</div>
</div>
<Container>
<Comments comments={comments} sendMsg={sendMsg} />
</Container>
</div>
);
};
export default NewsPageItem;
NewsItem
import React from 'react';
import { Link } from 'react-router-dom';
import Svg from 'common/Svg';
import NewEntity from '../../../models/entity/NewEntity';
import './NewsItem.scss';
export interface NewsItemShema {
item: NewEntity;
classname?: string;
}
const NewsItem: React.FC<NewsItemShema> = ({ item, classname }) => {
const { id, file_url, start_at, title, text, likes_count, comments_count, views_count } = item;
const classnames = classname ? 'news__item ' + classname : 'news__item ';
const resizeText = (str: string | undefined) => {
if (str === undefined) return false;
const txt = str.substring(0, 75);
// eslint-disable-next-line no-console
return txt;
};
return (
<Link to={`/news/${id}`} className={classnames} style={{ backgroundImage: `url(${file_url})` }}>
<div className="news__wrap">
<div className="news__date">{start_at}</div>
<div className="news__title">{title}</div>
<div className="news__desc">{resizeText(text) + '...'}</div>
<div className="news__stats">
<div className="news__icon">
<Svg name="heart" width={24} height={24} className="news__svg" />
{likes_count}
</div>
<div className="news__icon">
<Svg name="comment" width={20} height={20} className="news__svg" />
{comments_count}
</div>
<div className="news__icon">
<Svg name="view" width={20} height={20} className="news__svg" />
{views_count}
</div>
</div>
</div>
</Link>
);
};
export default NewsItem;
如果使用Route参数配置路由，则无需使用history.location并将其拆分以获取值
您可以像这样简单地配置您的路线
<Route path="/news/:id" component={NewsPageItem} />
并使用带有useParams钩子的匹配参数访问ID
const { id } = useParams();
现在，您必须知道，在更改Route参数时，该组件不会重新安装而是重新呈现，因此您需要重新获取数据以获取新的ID。为此，将id添加为对useEffect的依赖项>
useEffect(() => {
dispatch(getNewId(id));
dispatch(getList());
dispatch(setView(id));
dispatch(getComments(id));
}, [newById.likes_count, newById.views_count, id]);