Question

我有以下代码来呈现手风琴。没有语法错误，但不会呈现任何数据。 json是正确的，并且数据迭代部分正在正确进行。如果我在jsx元素之前添加return语句，那么它将呈现为完美。我究竟做错了什么？

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>
        )
    }

我正在使用babel和我的.babelrc文件。

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

Answer 1

您不是从内部map方法返回的，也不是从映射结果返回的

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

您需要返回<Accordion.Title>组件的数组。在return之前添加Object.keys(pathObj).map((key) => {语句，并使用包装器组件包装手风琴标题和内容。因此代码将是这样

 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>
            )
        }

注意：如果要在大括号（{}）中返回某些内容，则应该有一个return语句。在您当前的代码中，第二个map函数中没有return语句

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

2 个答案: