2016-10-19 3 views
0

항목을 가져 오기 요청을 통해받은 항목으로 정의 된 메뉴를 만들어야합니다 (모두 응용 프로그램의 백엔드를 통해 동적으로 수행됩니다).가져 오기 요청을 통해 감속기 만들기

[ 
    { 
     id: "Option1", 
     subtopics:[ 
      { 
       id: "Option 1-1", 
       subtopics: [ 
        { 
         title: "Option 1-1-1" 
        }, 
        { 
         title: "Option 1-1-2" 
        } 
       ] 
      }, 
      { 
       id: "Option 1-2", 
       subtopics: [ 
        { 
         title: "Option 1-2-1" 
        }, 
        { 
         title: "Option 1-2-2" 
        } 
       ] 
      }, 
     ] 
    }, 

    { 
     id: "Option2", 
     subtopics:[ 
      { 
       id: "Option 2-1", 
       subtopics: [ 
        { 
         title: "Option 2-1-1" 
        }, 
        { 
         title: "Option 2-1-2" 
        } 
       ] 
      }, 
      { 
       id: "Option 2-2", 
       subtopics: [ 
        { 
         title: "Option 2-2-1" 
        } 
       ] 
      }, 
     ] 
    } 
] 

내가 뭘하고 싶은 것이 유일한 옵션 1, 옵션 2가 표시가있는 메뉴를 표시하는 것입니다

목적은 다음과 같은 형식을 갖습니다. 옵션 1을 클릭하면 하위 주제가 모두 표시되고 하위 항목을 클릭하면 하위 주제가 모두 표시됩니다. (트리 메뉴의 형식으로)

이것에 대해 꽤 생각한 끝에 Redux를 사용하는 것이 유일한 방법이라고 생각합니다. 그러나 나는 정말로 여기에서 어디로 가야할지 모른다. 그것은 지금처럼

, 내가 설정에 감속기에서이 객체에 대한 GET 요청을했지만, 나는 다음과 같은 오류가 점점 오전 : 여기 Error: Reducer "topic" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined.

내 감속기의 현재 코드 :

export default function(){ 
    const request = axios.get(theUrl) 
     .then(function(response){ 
      return response.data; //the entire object array 
     }) 
} 

호출되는 URL이 실제로 유효하다는 것을 명심하십시오, 나는 앱의 다른 부분에서 그것을 테스트했습니다.

질문에 덧붙여 야 할 것 같습니까? 나는 이것을 올바른 방법으로하고 있습니까? 그렇지 않다면 어떻게하면이 메뉴를 동적으로 생성하고 redux가 아니라면 각 주 주제를 클릭하여 '메뉴 트리'를 만들 수 있습니까?

감사합니다. componentWillMount는 작업을 시작하는 동안

+0

_ "Redux를 사용하는 것이 유일한 방법은 _"_ 거의 불가능합니다. Redux는 복잡한 조정 작업이 많이 필요할 때 도움이되지만, 이와 같은 간단한 작업에 대해서는'setState '보다 낫지 않습니다. – joews

+1

그리고 저는 당신이 감속기를 잘못 이해했다고 생각합니다. 감속기는 앱의 현재 상태와 동작을 취하여 새로운 상태를 반환하는 _pure 함수 _ (AJAX가 없음)입니다. 당신은 그것을 직접 부르는 것이 아닙니다. 당신은 행동을 파견하고, Redux는 당신에게 감속 원을 부릅니다. – joews

+0

@joews 죄송합니다. 그럼 분명히 내가 이것에 대해 어떻게 생각하는지 잘못 생각했습니다. 그러나 감속기가 아닌 경우,이 메뉴 트리를 구성 요소와 함께 어떻게 만들 수 있습니까? – theJuls

답변

0

API 호출 API를 호출 한 후 감속기하는 결과를 완전히 통과 될때, 행동에 배치하고 감속기에서 초기 상태 빈 객체, 구성 요소에서

를 사용한다, 소품은 빈 메뉴가 포함되어있는 경우 오브젝트

관련 문제