감속기의 데이터를 보내기 전에 컴포넌트 호출 작업 생성자를 보낼 수 있습니다.

Question

API의 사용자 목록을 렌더링하는 반응 요소가 있습니다. 나는 그렇게처럼 내 라이프 사이클 후크 방식으로 내 행동 작성자를 호출 오전 :

componentWillMount() { 
    this.props.fetchUsers(); 
    } 

내가 확인하고 데이터가 반환하고 올바른 형식으로 감속기에 파견되고있다. 내 구성 요소에서 이러한 사용자를 렌더링하려고 할 때, 아무것도 페이지에 표시되고 있지 :

renderUser(user) { 
    return (
     <div className="card card-block"> 
     <h4 className="card-title">{user.name}</h4> 
     <p className="card-text">{user.company.name}</p> 
     <a className="btn btn-primary" href={user.website}> 
      Website 
     </a> 
     </div> 
    ); 
    } 
    render() { 
    return (
     <div className="user-list">{this.props.users.map(user => this.renderUser)}</div> 
    ); 
    } 

내가 오류 또는 경고를 얻을, 내 구성 요소를 검사 한 후 페이지에 렌더링되는, 그러나 비어 콘텐츠의 몇 가지 콘솔 로그를 만들려고 할 때 구성 요소 WillMount()가 축소 기보다 먼저 호출되는 것 같습니다. 이유는 알 수 없습니다. 이것은 fetchUsers() 액션 생성자를 호출 한 후 내 사용자 배열이 비어 있음을 의미합니다.

편집 : 소품 내가 구성 요소의 상단에 내 모든 행동을 가져

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

export default connect(mapStateToProps, actions)(UserList); 

에 상태와 행동 제작자 매핑. 내 감속기는 작업 작성자의 페이로드 (배열)를 앱 상태에 추가합니다.

는

export default function(state = [], action) { 
    switch (action.type) { 
    case FETCH_USERS: 
     return [...state, action.payload.data]; 
    } 
    return state; 
} 

내 행동 작성자는 단순히 GET 요청을하게하고, 감속기로를 보냅니다

export function fetchUsers() { 
    const request = axios.get("https://jsonplaceholder.typicode.com/users"); 
    return { 
    type: FETCH_USERS, 
    payload: request 
    }; 
} 

편집 2 :받은 JSON 데이터의

예 :

Answer 1

수명주기를 살펴보면 첫 번째 구성 요소는 componentwillmount() . 렌더링 전에 호출됩니다. refer

Answer 2

당신은 함수에 사용자 데이터를 전달하지 않는

<div className="user-list">{this.props.users.map(user => this.renderUser(user))}</div> 

Answer 3

당신은 당신의 감속기에 초기 상태 (Initial)에

loaded: false, 

같은 부울을 삽입하려고하고 행동

에 넣어 수 있습니다

case USERS_LOAD : 
loaded: true, 
users: action.users, 
... users, 

다음 somethi 귀하의 구성 요소에있는 것 같아요

const Users = ({ loaded, users }) => { 
if (!loaded) { 
return <div>Is loading ...</div> 
} 
    return (
    <p>Voici les utilisateurs :</p> 
{users.map(user => { 
<li>{user}</li>} 
); 
}; 
Users.propTypes = { 
    users: PropTypes.object.isRequired, 
    loaded: PropTypes.bool.isRequired, 
}; 

데이터 전화를 시작할 수 있습니다. 나는 당신을 도울 수 있기를 바랍니다 .-)