Object.keys（）。map（）的呈现方法未呈现

Question

I've got the following code to render an accordion. There are no syntax errors but it doesn't render any of the data. The json is correct and the data iteration part is happening correct. If I add a return statement before the jsx elements it renders as perfect. What am I doing wrong?

render(){
        const { activeIndex } = this.state
        const swaggerJson = this.props.swaggerJson;
        return (
            <Accordion>
                {Object.keys(swaggerJson.paths).map((pathName, pathIndex) => {
                    const pathObj = swaggerJson.paths[pathName];
                    return Object.keys(pathObj).map((key) => {
                        <Accordion.Title index={pathIndex} onClick={this.handleClick}>
                            <Icon name='dropdown' />
                            <span>{key}</span>
                            <span>{pathName}</span>
                            <span>{pathObj[key].summary}</span>
                        </Accordion.Title>,
                        <Accordion.Content active={activeIndex === pathIndex}>
                            <p>
                                A dog is a type of domesticated animal. {pathIndex} Known for its loyalty and faithfulness, it can
                                be found as a welcome guest in many households across the world.
                            </p>
                        </Accordion.Content>
                    });
                })}
            </Accordion>
        )
    }

I'm using babel and my .babelrc file.

{
    "presets": ["es2015", "react"],
    "plugins": ["transform-object-rest-spread"]
}

Answer 1

You are not returning from the inner map method as well the mapped result

render(){
        const { activeIndex } = this.state
        const swaggerJson = this.props.swaggerJson;
        return (
            <Accordion>
                {Object.keys(swaggerJson.paths).map((pathName, pathIndex) => {
                    const pathObj = swaggerJson.paths[pathName];
                    return Object.keys(pathObj).map((key) => {
                        return ([
                         <Accordion.Title index={pathIndex} onClick={this.handleClick}>
                            <Icon name='dropdown' />
                            <span>{key}</span>
                            <span>{pathName}</span>
                            <span>{pathObj[key].summary}</span>
                        </Accordion.Title>,
                        <Accordion.Content active={activeIndex === pathIndex}>
                            <p>
                                A dog is a type of domesticated animal. {pathIndex} Known for its loyalty and faithfulness, it can
                                be found as a welcome guest in many households across the world.
                            </p>
                        </Accordion.Content>
                       ])
                    });
                })}
            </Accordion>
        )
    }

Answer 2

You need to return the array of <Accordion.Title> component. Add return statement before Object.keys(pathObj).map((key) => { and also wrap the accordion title and content with a wrapper component. So the code will be like this

 render(){
            const { activeIndex } = this.state
            const swaggerJson = this.props.swaggerJson;
            return (
                <Accordion>
                    {Object.keys(swaggerJson.paths).map((pathName, pathIndex) => {
                        const pathObj = swaggerJson.paths[pathName];
    //add return statement here
                        return Object.keys(pathObj).map((key) => 
// you need to wrap <Accordion.Title> and <Accordion.Content> using `div` or other component.
                          (<div> 
                            <Accordion.Title index={pathIndex} onClick={this.handleClick}>
                                <Icon name='dropdown' />
                                <span>{key}</span>
                                <span>{pathName}</span>
                                <span>{pathObj[key].summary}</span>
                            </Accordion.Title>,
                            <Accordion.Content active={activeIndex === pathIndex}>
                                <p>
                                    A dog is a type of domesticated animal. {pathIndex} Known for its loyalty and faithfulness, it can
                                    be found as a welcome guest in many households across the world.
                                </p>
                            </Accordion.Content>
                        <div>));
                    })}
                </Accordion>
            )
        }

Note: If you want to return something in the curly bracket({}), then there should be a return statement. In your current code, there is no return statement in the second map function