React componentWillReceivePropsが状態を更新していません

Question

私はこのReact親コンポーネントをここに持っています。この時点で子コンポーネントはドロップダウンメニューを返すだけです。私は、componentWillReceivePropsがここで状態を更新することを期待していました。これは、順番に、StopListに渡されるべきです。しかし、state.selectedSubがhandleSubSelectによって変更された場合、何も起こらず、StopListはどのプロップも受け取りません。

私はcomponentWillReceivePropsの非同期性に間違いがありますか？それは私のコードの間違った場所にありますか？ライフサイクルの方法が間違っていますか？

// We're controlling all of our state here and using children 
// components only to return lists and handle AJAX calls. 

import React, { Component } from 'react'; 
import SubList from './SubList'; 
import StopList from './StopList'; 

class SubCheck extends Component { 

    constructor (props) { 
    super(props); 
    this.state = { 
     selectedSub: '--', 
     selectedStop: null, 
     stops: ['--'], 
    }; 
    this.handleSubSelect.bind(this); 
    this.handleStopSelect.bind(this); 
    } 

    // We want the user to be able to select their specific subway 
    // stop, so obviously a different array of stops needs to be 
    // loaded for each subway. We're getting those from utils/stops.json. 
    componentWillReceiveProps(nextProps) { 
     var stopData = require('../utils/stops'); 
     var stopsArray = []; 
     var newSub = nextProps.selectedSub 
     for(var i = 0; i < stopData.length; i++) { 
      var stop = stopData[i]; 

      if (stop.stop_id.charAt(0) === this.state.selectedSub) { 
       stopsArray.push(stop.stop_name); 
      } 
     } 
     if (stopsArray.length !== 0 && newSub !== this.state.selectedSub) { 
      this.setState({stops: stopsArray}); 
     } 
    } 

    handleSubSelect(event) { 
     this.setState({selectedSub:event.target.selectedSub}); 
    } 

    handleStopSelect(event) { 
     this.setState({selectedStop:event.target.selectedStop}) 
    } 

    render() { 
     return (
      <div> 
       <SubList onSubSelect={this.handleSubSelect.bind(this)}/> 
       <StopList stops={this.state.stops} onStopSelect={this.handleStopSelect.bind(this)}/> 
      </div> 
     ); 
    } 
} 

export default SubCheck; 

Answer 1

あなたはデータを複製しており、不要な頭痛を引き起こしています。

selectedSubとselectedStopの両方が、propsとstate属性として格納されています。このデータがどこにあるかを決める必要があります。

あなたが遭遇している問題は、state属性を変更し、これがあなたの小道具への変更を引き起こすことを期待しているという事実の周りを回っています。彼らが名前を共有しているからといって、彼らが同じ価値を持っているわけではありません。