Redux를 사용할 때 ReactJS 기본 소품을 선언하는 방법?

Question

반응에서 기본 소품을 선언하는 올바른 방법은 무엇입니까? 그래서 redux를 사용하여 비동기 적으로 할당 된 소품의지도를 호출 할 때 정의되지 않은 오류가 발생하지 않도록하려면 어떻게해야합니까? 바로 다음 구문을 사용하면 렌더링 할 초기 호출에서 데이터가 정의되지 않았으므로 trans_filter를 할당 할 때 오류가 발생합니다. 여기

class ContainerComponent extends React.Component { 
    static defaultProps = { 
    searchProps: { 
     data: [] 
    } 
    }; 

    constructor(props) { 
    super(props); 
    } 

    render(){ 
    let trans_filter = JSON.parse(JSON.stringify(this.props.searchProps.data)); 
    } 
} 

const mapStateToProps = (state) => ({ 
    searchProps: state.searchProps 
}); 

export default connect(mapStateToProps, {getTransactionsAll})(ContainerComponent); 

Answer 1

는 ReactJS 구성 요소를 작성하기위한 ES6 클래스 구문을 사용할 때 기본 소품을 선언하는 방법은 다음과 같습니다

class ContainerComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    render(){ 
    let trans_filter = JSON.parse(JSON.stringify(this.props.searchProps.data)); 
    } 
} 

ContainerComponent.defaultProps = { 
    searchProps: { 
    data: [] 
    } 
}; 

export default ContainerComponent; 

는 또한 defaultProps을 선언하는 또 다른 구문이 있습니다. 이것은 바로 가기이지만, 빌드에서 ES30 속성 초기화 도구가으로 설정된 경우에만 작동합니다. 내가 당신을 위해 작동하지 않는 이유를 나는 당신의 구문을 사용하여 어떤 문제를 볼 수 없기 때문에 즉,의 가정

class ContainerComponent extends React.Component { 
    static defaultProps = { 
    searchProps: { 
     data: [] 
    } 
    }; 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    let trans_filter = JSON.parse(JSON.stringify(this.props.searchProps.data)); 
    } 
} 

export default ContainerComponent; 

---

편집 : 당신이 당신의 mapStateToProps를 공유 한 후, 그래, 그것은 돌아 오는 함께 할 수있는 뭔가가!

이 문제는 reducer에 의해 발생합니다. initial state shape을 선언해야하며 각 감속기에서 초기 상태를 지정해야합니다. Redux는 처음으로 undefined 상태로 감속기에 전화 할 것입니다. 이것은 우리 앱의 초기 상태를 반환 할 수있는 기회입니다.

설정 초기 상태 :

const searchPropsInitialState = { 
    data: [] 
}; 

그런 다음, 감속기 당신이 searchProps를 조작 할 :

자세한 내용

function yourReducer(state = searchPropsInitialState, action) { 
    // ... switch or whatever 

    return state; 
} 

는 handling actions in the Redux docs를 참조하십시오.