Reux Redux 내 입력 값을 가져 오는 방법

내 렌더링보기에서 소품의 값을 가져 오려고합니다.Reux Redux 내 입력 값을 가져 오는 방법

데이터베이스에서 전자 상거래 데이터를 가져옵니다.

componentWillMount(){ 
    this.props.dispatch(fetchStore()) 
}

이 동작은 작동하며 데이터를 반환합니다.

이 내 콘솔 로그입니다

내가 가진 문제가 있음을 나는 소품 매장의 값에 액세스 할 때. 나는이 콘솔 오류

<FormGroup> 
    <Label htmlFor="name">Name *</Label> 
    <div className="controls"> 
     <InputGroup> 
      <Input id="name" size="16" type="text" value={this.props.store.store.name} /> 
     </InputGroup> 
    </div> 
</FormGroup

내보기 내 디스패처가 요청을 받고 완료되기 전에 렌더링지고 그림을 얻는다.

내 렌더링에서 소품을 콘솔에 기록 할 때이 사실을 알기 때문에 이것을 알고 있습니다.

//Inside my render() 

console.log(this.props.store)

이 출력됩니다.

처음 소품 가게는 정의하지만 REDUX 저장 한 후 재 렌더링하면 나는 전자 상거래 데이터를 저장 얻을.

알고 싶습니다. 렌더링하기 전에 내 데이터가 요청을 마치기를 기다리는 방법은 무엇입니까?

내가 잘못한 경우에 대비 한 조치입니다.

나는 redux-thunk 미들웨어를 사용하고 있습니다.

import axios from 'axios' 

export function fetchStore() { 
    return function(dispatch) { 
     axios.get('http://localhost:5000/_Store/Details') 
      .then((res) => { 
       dispatch({type: 'FETCH_STORE_FULFILLED', payload: res.data}) 
      }) 
      .catch((err) => { 
       dispatch({type: 'FETCH_STORE_REJECTED', payload: err}) 
      }) 
    } 
}

출처

2017-09-19 user3862830

봅니다 componentWillMount 실행 componentDidMount 대신

componentDidMount(){ 
    this.props.dispatch(fetchStore()) 
}

componentWillMount의 그것은 구성 요소의 수명주기에 따라, componentWillMount에서 API를 호출 할 수있는 가장 좋은 방법이 아니다 사용 먼저 render 다음 componentDidMount

출처

2017-09-19 05:08:56

당신에게 렌더링하기 전에 redux 저장소가 업데이트되기를 기다리지 말고,

와 같은 정의되지 않은 값을 검사하는 조건을 지정합니다.

<FormGroup> 
    <Label htmlFor="name">Name *</Label> 
    <div className="controls"> 
     <InputGroup> 
      <Input id="name" size="16" type="text" value={this.props.store? 
this.props.store.store.name: ''} /> 
     </InputGroup> 
    </div> 
</FormGroup>

출처

2017-09-19 05:16:56

렌더 기능에 체크를 추가하여 설정하기 전에 이름 소품이 있는지 확인할 수 있습니다. 이렇게하면 처음에는 빈 입력이 렌더링되지만 API에서 가져온 이름은 설정됩니다.

<FormGroup> 
    <Label htmlFor="name">Name *</Label> 
    <div className="controls"> 
     <InputGroup> 
      <Input id="name" size="16" type="text" value={(this.props.store != undefined && this.props.store.store != undefined) ? this.props.store.store.name : ''} /> 
     </InputGroup> 
    </div> 
</FormGroup>

출처

2017-09-19 05:25:08 codeslayer1

Reux Redux 내 입력 값을 가져 오는 방법

답변

관련 문제