Javascript 对不更新组件的链接作出反应

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

在正常工作的主页中（当您单击其中任何一个项目时，会出现一个项目列表，它会转到项目路径），但在项目页面中，当您单击类似项目列表中的任何项目时（视图未更新）

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"));

conststore=createStore（ItemsReducer，applyMiddleware（…中间件））；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
render（来自react redux文档，但它不起作用
您希望在单击链接时更新什么？
任何路径/item/：id（具有任何id:242324355465）都将显示相同的结果，因为在item组件中不使用params.id

已更新

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

挂钩上：

const Item=（）=>{
const params=useparms（）；
useffect（（）=>{
get（`/item/${params.id}`）。然后（…）
}，[params.id]）；
返回(
...
)
}

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

在类组件中，您必须使用
componentdiddupdate
：

类项扩展组件{
componentDidMount（）{
这是fetchData（）；
}
componentDidUpdate（prevProps）{
if（prevProps.match.params.id！==this.props.match.params.id）{
这是fetchData（）；
}
}
fetchData=（）=>{
...
}
...
}
点击链接后，您希望更新什么？
任何路径/item/：id（具有任何id:242324355465）都将显示相同的结果，因为在item组件中不使用params.id

已更新

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

挂钩上：

const Item=（）=>{
const params=useparms（）；
useffect（（）=>{
get（`/item/${params.id}`）。然后（…）
}，[params.id]）；
返回(
...
)
}

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

在类组件中，您必须使用
componentdiddupdate
：

类项扩展组件{
componentDidMount（）{
这是fetchData（）；
}
componentDidUpdate（prevProps）{
if（prevProps.match.params.id！==this.props.match.params.id）{
这是fetchData（）；
}
}
fetchData=（）=>{
...
}
...
}
it Item component，我使用Item_id:props.match.params.id然后我使用componentDidMount从存储在Store中的项目获取有关该项目的数据我已经在使用componentDidMount，请检查此代码沙盒，我为问题提供了一个示例？@RemonAmin修复了您的问题如果我帮助了您，请将我的答案标记为正确：）您的解决方案帮助了我，但在我需要做一些修改之后，非常感谢您！！！我迷路了，我正要花第三个小时蒙着眼睛修改代码，直到我看到你的组件更新。祝你有一个美好的一天，参加upvote.it Item component，我使用Item_id:props.match.params.id然后我使用componentDidMount从存储在Store中的项目获取关于该项目的数据我已经在使用componentDidMount了，请检查此代码沙盒，我为问题提供了一个示例？@RemonAmin修复了你的问题，如果我帮助了你，请将我的答案标记为正确：）您的解决方案帮助了我，但在我需要进行一些修改之后，非常感谢您！！！我迷路了，我正要花第三个小时蒙着眼睛修改代码，直到我看到你的组件更新。祝你有一个美好的一天，参加投票。
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;



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);



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);



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;