Reactjs: данные отображаются после перезагрузки страницы вручную

Question

Я создаю небольшое веб-приложение с 2 страницами в React Js.На моей домашней странице отображается список городов, которые я загружаю из REST API через Axios.

Моя задача - щелкнуть по любому городу и получить его название.Когда я нажимаю на название любого города, маршрут меняется в адресной строке с добавлением определенного идентификатора города, но этот компонент с названием города не отображается.Когда я перезагружаю страницу, она показывает название этого конкретного города, а затем она работает совершенно нормально.

Что я должен сделать, чтобы она работала правильно без перезагрузки страницы вручную?

Послемой фрагмент кода для проблемы:

Компонент приложения (маршрут):

<BrowserRouter>
  <div className="App">
    <Header />
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
      <Route path="/:city_id" component={SecondTable} />
    </Switch>
  </div>
</BrowserRouter>

Домашний компонент:

class Home extends Component {
  state = {
    cities: [],
    name: ""
  };

  async componentDidMount() {
    await axios.get("http://100.124.69.3:8080/api/v1/cities").then(res => {
      this.setState({ cities: res.data });
      console.log(res);
    });
    console.log(this.state.cities);
  }

  render() {
    let postList = this.state.cities.map(city => {
      return (
        <div key={city.id}>
          <p>
            <BrowserRouter>
              <Link to={"/" + city.id}>{city.name}</Link>
            </BrowserRouter>
          </p>
        </div>
      );
    });
    return (
      <div className="align">
        All Facilities (NCAL)
        <div className="Modal1">{postList}</div>
      </div>
    );
  }
}

SecondTable Компонент: (Где я хочу отобразитьназвание города)

class SecondTable extends Component {
  state = {
    data: [(visible: false), (city: null)]
  };

  async componentDidMount() {
    console.log(this.props);
    let id = this.props.match.params.city_id;
    await axios
      .get("http://100.124.69.3:8080/api/v1/cities/" + id)
      .then(res => {
        this.setState({ city: res.data.name });
        console.log(res);
      });
    console.log(this.state.city);
  }

  render() {
    return <div className="align1">{this.state.city}</div>;
  }
}

Answer 1

BrowserRouter используется для каждого приложения.Вам не нужно использовать его где-либо еще в вашем коде.Итак, удалите ненужные BrowserRouter из вашего Home компонента:

<BrowserRouter><Link to = {'/'+city.id}>{city.name}</Link></BrowserRouter></p>

Просто используйте так:

<Link to = {'/'+city.id}>{city.name}</Link></p>

Кроме того, вам не нужно использовать async в вашем componentDidMount методе.Вы не правильно используете его.Даже если вы определили его как async метод и используете await, ваш render метод не ждет, пока он завершит процесс выборки.Однако вы можете использовать async/await здесь, чтобы не использовать методы .then для обещания.

Еще одна вещь, не пытайтесь регистрировать свое состояние, как вы делаете в componentDidMount или сразу после setState метод.Поскольку это асинхронный метод, вы не можете получить значение состояния сразу после его обновления.Воспользуйтесь обратным вызовом setState:

this.setState({foo: "bar"}, () => console.log( this.state ))

или попробуйте зарегистрировать свое состояние в методе render:

render() {
    console.log( this.state );
    return (
        ....
    )
}