Javascript 从“模式”对话框更改数据后刷新“反应”组件

我正在构建一个小型web应用程序，以了解如何应对和暴露问题。我的任务是单击一个特定的城市名称，然后转到另一个组件，该组件将显示该城市的名称

在第二个组件上，我有一个模式对话框，可以在其中更改城市名称。执行此操作时，我的组件仍然显示旧的城市名称，而不是我从“模式”对话框中选择的新名称。当我手动刷新页面时，它会显示新名称。我是一个很新的反应，在这种事情上感到困惑。我应该如何呈现更新的城市名称

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

class SecondTable扩展组件{
状态={
数据：[（可见：假），（城市：空）]
};
componentDidMount（）{
console.log（this.props）；
设id=this.props.match.params.city\u id；
axios
.get（“http://100.124.69.3:8080/api/v1/cities/“+id）
。然后（res=>{
this.setState（{city:res.data.name}）；
控制台日志（res）；
});
console.log（this.state.city）；
}
render（）{
返回{this.state.city}；
}
}

模式对话框的组件，我从中选择了新城市：

class FacilityModal extends Component {


state = {
    cities:[],
  }

  componentDidMount()
  {
    console.log(this.props.visa)
    await axios.get('http://100.124.68.1:8080/api/v1/cities' ).then(res => {
      this.setState({cities:res.data})

    });

  }



render() {
       let posts = (
         <div >All Facilities (NCAL)
               <div className = 'Modal'>
                   {this.state.cities.map(city =>
                       {
                         return <Link to = {'/'+city.id} key = {city.id} onClick = {this.props.onCancel}> {city.name} </Link>
                       })}
               </div>
               </div>

          );

    return (

      <div>
        <Modal
          title="Change Facility"
          visible={this.props.visible}
           onCancel={this.props.onCancel}
          footer={null}
        >
        <div>{posts}</div>
        </Modal>
      </div>
    );
  }

类FacilityModel扩展组件{
状态={
城市：[]，
}
componentDidMount（）
{
console.log（this.props.visa）
等待axios。获取更多信息http://100.124.68.1:8080/api/v1/cities）。然后（res=>{
this.setState（{cities:res.data}）
});
}
render（）{
让帖子=(
所有设施（NCAL）
{this.state.cities.map（city=>
{
返回{city.name}
})}
);
返回(
{posts}
);
}

城市初始列表的“我的家”组件：

class Home extends Component{


 state = {
    cities:[],
    name:''
  }

   componentDidMount()
  {

     axios.get('http://100.124.68.1:8080/api/v1/cities').then(res => {
      this.setState({cities:res.data})

    });

  }

  render(){
    let postList = this.state.cities.map(city =>
    {
      return (

          <div key = {city.id}>
          <p>
        <Link to = {'/'+city.id}>{city.name}</Link></p>
        </div>
      )
    })
    return(


        <div className = 'align'>All Facilities (NCAL)
<div class="hr-sect">OR</div>
   <div className = 'Modal1'>
            {postList}
        </div>
      </div>


    )
  }

class Home扩展组件{
状态={
城市：[]，
名称：“”
}
componentDidMount（）
{
axios.get（）http://100.124.68.1:8080/api/v1/cities）。然后（res=>{
this.setState（{cities:res.data}）
});
}
render（）{
让postList=this.state.cities.map（city=>
{
返回(

{city.name}

)
})
返回(
所有设施（NCAL）
或
{postList}
)
}

组件的路由：

render() {
return (


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

render（）{
返回(

---

您正在独立地管理每个组件内的状态。您的问题的简单答案是，您需要更新状态，以便两个组件都可以从中进行渲染。您可以通过多种方式实现这一点，从使用状态管理框架（如redux或mobx）到使用纯反应状态并重新组织com组件树。如果看不到您显示的两个组件的父组件，很难说您应该如何操作。其要点是：将一个函数作为道具传递给模式组件，该组件将在选择城市时启动。该函数应更新“选定城市”的状态。然后，您将传递“选定ci”“ty”作为辅助表组件的道具。当状态更新时，会触发重新渲染，这反过来会将新的“选定城市”状态作为道具传递给辅助表组件，并使用更新的值重新渲染

react团队的这篇博文是一篇关于如何处理react问题的精彩介绍。我推荐得太多了。

---

我已经添加了我的组件，没有redux有什么方法可以做到吗？

render() {
return (


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