Question

我正在React Js中构建一个包含2页的小型Web应用程序。我正在主页上显示一些城市列表，这些列表是通过Axios从REST API获取的。

我的任务是单击任何城市并获取其名称。当我单击任何城市名称时，地址栏中的路线会发生更改，并添加了特定的城市ID，但是没有显示城市名称的组件。当我重新加载页面时，它会显示该特定城市的名称，然后就可以正常工作了。

我应该怎么做才能使其正常工作而无需手动重新加载页面？

以下是我针对该问题的代码段：

应用程序组件（路由）：

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

第二表组件：（我要在其中显示城市名称的地方）

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 (
        ....
    )
}

React.js：手动重新加载页面后显示数据

1 个答案: