Question

我需要创建一个菜单，其项目由通过get请求接收的对象定义（它全部通过应用程序的后端动态完成）。

该对象将具有以下格式：

[
    {
        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。但是我真的不确定从哪里开始。

就像现在一样，我尝试在reducer中设置此对象的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.

以下是我的reducer的当前代码：

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

请记住，被调用的URL确实有效，我已在应用程序的其他部分对其进行了测试。

我想补充一下这个问题，我是否正确地做到了这一点？如果没有，如果没有使用redux，我如何通过点击每个主题来动态生成此菜单并制作“菜单树”？

谢谢！

Answer 1

api调用应放在动作中，当api调用完成后再将结果传递给reducer，在reducer中使用初始状态为空白对象，

在Component中，在componentWillMount期间，如果prop包含空菜单对象

，则启动操作

通过get请求创建reducer

1 个答案: