React Link不更新组件

Question

我使用React和Redux来列出项目数量，在项目内部我有一个类似项目的列表

在主页中(当你点击其中任何一个时，都会有一个项目列表，它会转到项目路径(，它运行良好，但在项目页面内，当你点击类似项目列表中的任何项目时(视图不更新(

代码Sandobx在这里

App.js

const store = createStore(ItemsReducer, applyMiddleware(...middlewares));

class App extends React.Component {
render() {
return (
<Provider store={store}>
<Main />
</Provider>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));

main.js

const Main = () => {
return (
<Router>
<div>
<Header />
<div className="container-fluid">
<Switch>
<Route exact path="/" component={Home} />
<Route path="/item/:id" component={Item} />
</Switch>
</div>
</div>
</Router>
);
};
export default Main;

Home.js

class Home extends React.Component {
render() {
const itemsList = this.props.items.map(item => {
return <ItemList item={item} key={item.id} />;
});
return <div className="items-list"> {itemsList}</div>;
}
}
const mapStateToProps = state => ({
items: state.items,
user: state.user
});
export default connect(mapStateToProps, null, null, {
pure: false
})(Home);

项目.js

class Item extends React.Component {
constructor(props) {
super();
this.state = {
item_id: props.match.params.id,
};

}
render() {
const itemsList = this.props.items.map(item => {
return <ItemList item={item} key={item.id} />;
});
return (
<div id="item-container">
<div className="item-list fav-items"> {itemsList} </div>;
</div>
);
}
}
const mapStateToProps = state => ({
items: state.items,
user: state.user
});
export default connect(mapStateToProps, null, null, {
pure: false
})(Item);

最后是ItemList.js

class ItemList extends React.Component {
render() {
const item = this.props.item;
const item_link = "/item/" + item.id;
return (
<Link to={item_link}>
<div className="item-li">
{item.title}
</div>
</Link>
);
}
}
export default ItemList;

我已经厌倦了使用react redux文档中的这个解决方案，但它不起的作用

Answer 1

您希望在单击链接时更新什么？任何路径/item/：id(具有任何id:2423345465(都将显示相同的结果，因为在item组件中没有使用params.id

更新

当id更改时，组件不重新装载，只更新组件(这是正确的行为(如果您想在每次更改id时获取数据，那么下一个解决方案必须适用于

挂钩：

const Item = () => {
const params = useParams();
useEffect(() => {
axios.get(`/item/${params.id}`).then(...)
}, [params.id]);
return (
...
)
}

每次id更改时，useEffect都会调用fetch

在类组件中，您必须使用componentDidUpdate:

class Item extends Component {
componentDidMount() {
this.fetchData();
}
componentDidUpdate(prevProps) {
if (prevProps.match.params.id !== this.props.match.params.id) {
this.fetchData();
}
}
fetchData = () => {
...
}
...
}