React Reduxは、データがフェッチされ、コンポーネントにマッピングされた後に再レンダリングされますか？

Question

こんにちは私は、取得したデータを取得することに問題があり、this.props.dataを子コンポーネント<GoogleMaps />に渡し、データが変更されたときに再レンダリングすることができます。

フォームが初めて送信され、データはフェッチされますが、再度フェッチされます。 render()関数は、{this.renderData()}の前に{this.renderMap(this.props.data)}を呼び出し、データを取得して返し、マップするので、新しいデータは使用できません。

私はそれらを切り替えようとしましたが、{this.renderMap(this.props.data)}を呼び出す前にデータがフェッチされるまでrender（）関数が待機していないようです。 GoogleMapコンポーネントにデータを渡して、レンダリングする前に新しいデータを再ロードできるようにする必要がありますか？

My renderData（）;正常に動作し、コンポーネントListItemを返します。私のフォームが提出されるたびに動作します。問題は、GoogleMapsコンポーネントがこの変更を認識して再レンダリングすることですか？

class Feature extends Component { 

    handleFormSubmit({ term, location }) { 
     this.props.fetchData({ term, location }); 
     this.setState({showMap: true}); 
    } 
    renderData() { 
     return this.props.data.map((data) => { 
      return (
       <ListItem 
        key={data.id} 
        data={data} /> 
      ) 
     }); 
    } 
    renderMap(data) { 
     if (this.state.showMap == true) { 
      const lon = data[0].location.coordinate.longitude; 
      const lat = data[0].location.coordinate.latitude; 
     return (
      <GoogleMap 
       data={data} 
       lon={lon} 
       lat={lat} /> 
     ) 
     } 
    } 
    render() { 
     const { handleSubmit, fields: { term, location }} = this.props; 
     return (
      <div> 
       <div> 
        <form className="form-inline" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
         <fieldset className="form-group"> 
          <label>Find:</label> 
          <input className="form-control" {...term} /> 
         </fieldset> 
         <fieldset className="form-group"> 
          <label>Location:</label> 
          <input className="form-control" {...location} /> 
         </fieldset> 
         <button action="submit" className="btn btn-primary">Search</button> 
        </form> 
       </div> 
       <div className="map_container"> 
       {this.renderMap(this.props.data)} 
       </div> 
       <ul className="list-group"> 
       {this.renderData()} 
       </ul> 
      </div> 
     ) 
    } 
} 

function mapStateToProps(state) { 
    return { data: state.data }; 
} 

export default reduxForm({ 
    form: 'search', 
    fields: ['term', 'location'] 
}, mapStateToProps, actions)(Feature); 

ここでfetchData関数を使用していますが、データを正しく取得しています。

export function fetchData({term, location}) { 
    return function(dispatch) { 
     axios.post(`${ROOT_URL}/data`, {term, location}) 
     .then(response => { 
      dispatch({ 
       type: FETCH_DATA, 
       payload: response 
      }) 
     }) 
    } 
} 

Answer 1

最後にこれを解決しました。 ComponentsWillReceivePropsはそのトリックをしました。 ComponentsWillReceivePropsにnextPropsと電話し、setStateと呼んでデータをnextProps.dataに設定しなければならなかった。

これにより、データを使用してGoogleMapsのロング座標をレンダリングし、各マーカーを設定することができました。

Answer 2

コンポーネントの使用WreReivePropsとコンポーネントの状態にあなたの小道具を渡すことはめったに良い考えではありません。あなたの減速機のコードを教えてください。おそらく、状態を変えているため、コンポーネントが予期したときに再レンダリングされないことがあります。

また、renderMap {this.renderMap(this.props.data)}にあなたの小道具を渡す必要はありません。 renderMapはデフォルトでthis.propsにアクセスできます。