2

React を学習するための小さな Web アプリケーションを構築していて、現在問題にさらされています。私の仕事は、特定の都市名をクリックして、その都市名が表示される別のコンポーネントに移動することです。

その 2 番目のコンポーネントには、都市の名前を変更できるモーダル ダイアログ ボックスが 1 つあります。これを行っている間、コンポーネントには、モーダル ダイアログ ボックスから選択した新しい都市名ではなく、古い都市名が表示されたままです。ページを手動で更新すると、その新しい名前が表示されます。私は反応するのが非常に新しく、そのようなことに混乱しています。更新された都市名をレンダリングするにはどうすればよいですか?

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>

4

1 に答える 1

1

各コンポーネント内の状態を個別に管理しています。あなたの質問に対する簡単な答えは、両方のコンポーネントがレンダリングできる状態を更新する必要があるということです。これは、redux や mobx などの状態管理フレームワークの使用から、純粋な反応状態の使用やコンポーネント ツリーの再編成まで、さまざまな方法で実現できます。あなたが示した 2 つのコンポーネントの親コンポーネントを見なければ、どのようにすべきかを正確に言うのは困難です。その要点は次のとおりです。都市が選択されたときに起動するモーダル コンポーネントに関数を props として渡します。その関数は、「選択された都市」の状態を更新する必要があります。次に、「選択した都市」を小道具として SecondTable コンポーネントに渡します。状態が更新されると、再レンダリングがトリガーされ、新しい「選択された都市」が渡されます。

反応チームによるこのブログ投稿は、反応の問題に対処する方法についての優れた紹介です。あまりお勧めできません。 https://reactjs.org/docs/thinking-in-react.html

于 2018-09-27T19:53:44.083 に答える