경로

Question

여기

의 알 수없는 번호, 소품대로 돌아 오는 저장소에서 데이터를 전달 상황이다

• 나는 서비스에서 데이터의 알 수없는 금액을 받고 내 돌아 오는 저장소에 넣어하고
전체 방법 아래
• 내가 대응 데이터를 전달 할 수 있도록하고 싶습니다 렌더링을 참조하십시오 -
• 각각의 데이터 포인트는 경로 반응 라우터 (V3)을 사용하여이 <Route path=':rid' component={Restaurant}/> 같은 설정이다 /:rid
• 자신의 경로를해야합니다 특정 레스토랑에 관한 것, 누구의 길 내 솔루션은 소품 this.props.restaurants과 레스토랑 구성 요소에 상점의 모든 레스토랑을 전달하는 것입니다 지금 그 레스토랑

에 대한 올바른 정보로 구성 요소를 렌더링 할 수 있도록 소품으로 레스토랑의 구성 요소에 탐색했다. 그런 다음 componentWillReceiveProps에서 모든 레스토랑을 반복하여 this.props.restaurants에 넣고 각 레스토랑의 rid이 this.props.routeParams과 일치하는지 확인합니다. 즉 :rid입니다. 만약 내가 그렇다면 그 상태를 보여주고 싶은 데이터를 포함하도록 설정하고 this.state.name을 'this.props.name'에있는 데이터와 반대로 설정하십시오.

다른 방법이 있습니까? 지금은 성능 문제는 아니지만 반복적으로 큰 데이터 집합이 심각한로드 시간으로 이어질 수 있다고 상상할 수 있습니다. 또한 반응 라우터가이 데이터를 소품으로 전달해야하므로이 구성 요소를 무국적으로 유지할 수있는 것처럼 보입니다.

는

이상적으로는이 같은 일이 일어날 것 :

요청이 만들어

• 내하는 index.js에서
• 반응 라우터 /1234에 컨설팅을 /를 REDUX 저장소를 조회하고 제거와 함께 레스토랑에 대한 데이터를 찾아 1234는
• 를 렌더링 컴포넌트 나는 그것이 아마도이 <Route path=':rid' component={<Restaurant {...matchedRestaurant} />}/>

이 퀘스트 같은 것을보고 상상에 소품으로 전달합니다 이온화는 짧게 질문 할 수 있습니다. 경로를 알 수없는 번호를 만들어 어떻게 탐색하면 해당 레스토랑의 데이터가 소품으로 렌더링됩니까?

Restaurant.js :

componentWillReceiveProps(nextProps) { this.props.restaurants.forEach((restaurant) => { if(restaurant.rid == nextProps.routeParams.rid) this.setState({name: restaurant.name}) }) }

하는 index.js :

render( ( <Provider store={store}> <Router history={hashHistory}> <Route path='/' component={App}> <IndexRoute component={RestaurantList} /> <Route path=':rid' component={Restaurant}/> </Route> </Router> </Provider> ), document.getElementById('root') )

https://github.com/caseysiebel/corner-team/blob/master/src/index.js

Answer 1

대신에 당신이 밖으로 가지고 반응 라우터 그림, 당신은해야한다 셀렉터 (잠재적으로 재 선택과 같은 패키지)를 사용합니다. Reselect에는 소품 (예 : routerParams)에 선택기를 배치하는 방법에 대한 섹션이 있습니다.) 제거 : https://github.com/reactjs/reselect#accessing-react-props-in-selectors 비 다시 선택 솔루션

, 당신은 간단하게 변경할 수있는과 같이 당신의 레스토랑 구성 요소에 연결 : @Sean Kwon로

@connect((state, props) => { 
    return { 
     restaurants: state.restaurant.restaurants.find((restaurant) => { 
      return restaurant.rid == props.routeParams.rid 
     }), 
    } 
}) 

---

댓글을 달았습니다, 당신은 또한 데이터를 정상화해야하는 것 사소한이 선택하기 : 당신이 mapDispatchToProps를 통해 조치를 연결 한 가정

@connect((state, props) => { 
    return { 
     restaurants: state.restaurant.restaurants[props.routeParams.rid], 
    } 
}) 

Answer 2

을, 당신은 당신의 가게를 정리하고 이것은 가능할 수있는 ync 동작입니다.

componentDidMount() { 
     this.props.fetchRestaurant(this.props.params.rid) 
    } 

그러면 상점에서 해당 레스토랑 데이터로 구성 요소를 업데이트합니다. 이렇게하면 구성 요소 상태를 사용하지 않아도되는 해당 데이터를 얻을 수있는 행동이 필요합니다. 상태를 중앙 집중화하기 위해 피해야합니다.

그렇지 않은 경우 빠르고 간단하게 해결할 수 있습니다.

componentWillReceiveProps(nextProps) { 
    var name = this.props.restaurant.find(res => res.rid === nextProps.routeParams.rid) 
    this.setState({name: name}) 
}