Question

我有一个react组件，它接受api调用中的json对象。我想遍历文件夹/文件json对象，并将其呈现在树庄园的组件return语句内。我在react componenet的html内调用traveseFolder函数。我希望它遍历对象并在每次迭代时呈现每个对象的名称和路径。我注意到，它们唯一呈现给我的方法是返回动态生成的div。问题是返回调用正在退出遍历函数。我如何解决这个问题，然后继续执行功能...

这是我的代码：

    const traverseFolder = (current:any) => {
        console.log(current)
        for(let i = 0; i < current.length; i++){
            // console.log(current[i]['text'])
            if(current[i]){
                console.log(current[i])
                if(current[i]['children'].length > 0){
                    console.log('# of children: ' + current[i]['children'].length)
                    console.log('folder found: ' + current[i]['text'])
                    return(
                        <div>
                            <span>{current[i]['text']}</span>
                        </div>
                    )
                    for(let j = 0; j < current[i]['children'].length; j++){
                        traverseFolder(current[i]['children'][j])
                    }
                }
                if(current[i]['children'].length === 0){
                    console.log('file found: ' + current[i]['text'])
                    return(
                        <div>
                            <span>{current[i]['text']}</span>
                            <span>{current[i]['path']}</span>
                        </div>
                    )
                }
            }
        }
    }

    return (
        <Dialog
            className={classNames(themeClass, styles.helpDialog)}
            title="Help"
            icon="help"
            isOpen={isOpen}
            onClose={mainStore.hideHelpDialog}
        >
        <div>
            {
                folderLoading ? (
                    <div>
                        {
                            traverseFolder(files)
                        }
                    </div>                    
                ) : (
                    <Spinner />
                )
            }

        </div>
        </Dialog>
    );

Answer 1

在这种情况下，您正在返回dom，并且return语句下面的代码未执行。您可以在return语句中添加文件夹travarsel逻辑。代码可以按如下进行。

const traverseFolder = (current:any) => {
        console.log(current)
        for(let i = 0; i < current.length; i++){
            // console.log(current[i]['text'])
            if(current[i]){
                console.log(current[i])
                if(current[i]['children'].length > 0){
                    console.log('# of children: ' + current[i]['children'].length)
                    console.log('folder found: ' + current[i]['text'])
                    return(
                        <div>
                            <span>{current[i]['text']}</span>
                            {
                              current[i]['children'].map((ele) => 
                                traverseFolder(ele)
                            }
                        </div>
                    )
                }
                if(current[i]['children'].length === 0){
                    console.log('file found: ' + current[i]['text'])
                    return(
                        <div>
                            <span>{current[i]['text']}</span>
                            <span>{current[i]['path']}</span>
                        </div>
                    )
                }
            }
        }
    }

    return (
        <Dialog
            className={classNames(themeClass, styles.helpDialog)}
            title="Help"
            icon="help"
            isOpen={isOpen}
            onClose={mainStore.hideHelpDialog}
        >
        <div>
            {
                folderLoading ? (
                    <div>
                        {
                            traverseFolder(files)
                        }
                    </div>                    
                ) : (
                    <Spinner />
                )
            }

        </div>
        </Dialog>
    );

遍历对象，但由于返回语句问题而退出

1 个答案: