从模态对话框更改数据后刷新 React 组件

Question

我正在构建一个小型 Web 应用程序来学习 React，现在遇到了一个问题。 我的任务是单击特定的城市名称并转到将显示该城市名称的另一个组件。

在第二个组件上，我有一个模式对话框，我可以在其中更改城市的名称。 在执行此操作时，我的组件仍然显示旧城市名称，而不是我从模式对话框中选择的新城市名称。 当我手动刷新页面时，它确实显示了新名称。 我对这些东西的反应和困惑很陌生。 我应该怎么做才能呈现更新的城市名称？

SecondTable 组件：（我想显示城市名称的地方）

class SecondTable extends Component {


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

   componentDidMount() {
    console.log(this.props);
    let id = this.props.match.params.city_id;
     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>;
  }
}

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

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

初始城市列表的 My Home 组件：

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>


    )
  }

组件的路由：

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>

Answer 1

您正在独立管理每个组件内的状态。 对您的问题的简单回答是，您需要更新两个组件都可以从中呈现的状态。 您可以通过多种方式实现这一点，从使用像 redux 或 mobx 这样的状态管理框架，到使用纯粹的反应状态和重新组织您的组件树。 如果没有看到你展示的两个组件的父组件，很难说你应该怎么做。 它的要点是：将一个函数作为道具传递给您的模态组件，该组件将在选择城市时触发。 该函数应更新“选定城市”的状态。 然后，您会将“选定城市”作为道具传递给您的 SecondTable 组件。 当状态更新时，会触发重新渲染，然后将新的“选定城市”状态作为道具传递给您的 SecondTable 组件，并且它也会使用更新后的值重新渲染。

react 团队的这篇博文很好地介绍了如何使用 react 解决问题。 我不能推荐它。 https://reactjs.org/docs/thinking-in-react.html