Реакция компонента нагрузки на навигацию

Question

Я пытаюсь получить контент с сервера на каждом маршрутизаторе.

Navigation.js

import { Component } from "react";
import { Link } from "react-router-dom";
export class Navigation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      all_nav: [
        {
          menu_name: "News 1",
          menu_items_id: "31"
        },
        {
          menu_name: "News 2",
          menu_items_id: "32"
        },
        {
          menu_name: "News 3",
          menu_items_id: "33"
        }
      ]
    };
  }

  render() {
    return (
      <ul>
        {this.state.all_nav.map((name, key) => (
          <li key={key}>
            <Link to={`news/${name.menu_items_id}`}>{name.menu_name}</Link>
          </li>
        ))}
        <hr />
        <li>
          <Link to="/">Home</Link>
        </li>
      </ul>
    );
  }
}

Navigation.js содержит список навигации, используемой для маршрутизации содержимого.

Index.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
import { App } from "./App";
import { NewsList } from "./NewsList";

window.React = React;

render(
  <BrowserRouter>
    <div>
      <Route exact path="/" title="App Title" render={props => <App />} />

      <Route path="/news/:filter" render={props => <NewsList {...props} />} />
    </div>
  </BrowserRouter>,
  document.getElementById("root")
);

NewsList.js

import { Component } from "react";
import {Navigation} from './Navigation'
export class NewsList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      post_record: []
    };
  }

  componentDidMount() {
    this.setState({ loading: true });
    // console.log(this.props.match.params.filter)
    Promise.all([
      fetch("https://binodgiri.com.np/api/news_listing.php", {
        method: "POST",
        headers: {
          Accept: "application/json"
        },
        body: JSON.stringify({
          param: this.props.match.params.filter
        })
      })
    ])
      .then(([all_post_api]) => Promise.all([all_post_api.json()]))
      .then(([post_data]) =>
        this.setState({
          loading: false,
          post_record: post_data
        })
      );
  }

  render() {
    return (
      <div>
        <h1>Hello Content</h1>
        {
          this.state.post_record.menu_name

        }
        <hr />
        <Navigation />
      </div>
    );
  }
}

NewsList.js является основным разделом рендеринга, в соответствии с: идентификатором фильтра, содержимое которого должно быть получено с сервера "https://binodgiri.com.np/api/news_listing.php"

Что я действительно хочу сделать, так это::

Если я сначала нажимаю «Новости 1» или любые другие «Новости», они отображаются идеально. И если я хочу перейти к «Новости 2» или другим событиям, ничего не происходит

Вот ссылка на песочницу: https://codesandbox.io/s/vykxvp17j7

Заранее спасибо.

Answer 1

Вы должны добавить эту логику.Поскольку componentDidMount уже смонтирован при первом щелчке ссылки, он не будет вызываться во второй раз, поэтому вам необходимо добавить следующую функцию жизненного цикла.(Это быстрое решение, вы также можете изменить свою логику для повышения производительности.)

componentDidUpdate(prevProps) {
    if (this.props.match.params.filter !== prevProps.match.params.filter) {
      Promise.all([
       fetch("https://binodgiri.com.np/api/news_listing.php", {
      method: "POST",
      headers: {
        Accept: "application/json"
      },
      body: JSON.stringify({
        param: this.props.match.params.filter
      })
    })
  ])
    .then(([all_post_api]) => Promise.all([all_post_api.json()]))
    .then(([post_data]) =>
      this.setState({
        loading: false,
        post_record: post_data
      })
    );    
   }
}

In Navigation.js

<Link to={`/news/${name.menu_items_id}`}>{name.menu_name}</Link>