React映射数组生成有序嵌套无序列表无输出问题排查

需要在React中实现有序列表（<ol>）嵌套无序列表（<ul>），将给定数组数据格式化为指定的示例展示形式。

给定输入数组 #

["Input: nums = [2,2,1,1,5,3,3,5] Output: 7 Explanation: For the subarray [2,2,1,1,5,3,3] of length 7, if we remove nums[4] = 5, we will get [2,2,1,1,3,3], so that each number will appear exactly twice.","Input: nums = [1,1,1,2,2,2,3,3,3,4,4,4,5] Output: 13"]

期望输出格式 #

1. 
Input: 
nums = [2,2,1,1,5,3,3,5]

Output:
7

Explanation:
For the subarray [2,2,1,1,5,3,3] of length 7, if we remove nums[4] = 5, we will get [2,2,1,1,3,3], so that each number will appear exactly twice.

2.
Input:
nums = [1,1,1,2,2,2,3,3,3,4,4,4,5]

Output:
13

当前尝试的代码 #

function formatExamples(example){
    const exampleArr = example.slice(3).split(/\S+(?=: )/g)
    exampleArr.shift()
    return exampleArr
}
...
<h5> Examples: </h5>
<ol> 
    {arrExamples.map((example, idx) => {
        <ul>
            return {formatExamples(example).map((elem, ind) =>{
                return(<li>{elem}</li>)
            })}
        </ul>
        // return(<li key={idx}> {formatExamples(example)}</li>)
    })}
</ol>

运行后页面无任何内容返回，请求解决该问题。

问题分析 #

1. map回调未返回渲染元素：arrExamples.map的回调中直接写了<ul>标签，但没有用return返回，React无法识别并渲染这部分内容。
2. 格式解析逻辑错误：原formatExamples的切片和正则拆分逻辑无法准确拆分Input、Output、Explanation的内容，导致拆分结果不符合预期。
3. 缺少列表项key：React列表渲染要求每个列表项必须有唯一的key属性，原代码未添加。

修正后的代码 #

1. 修复格式解析函数

function parseExample(exampleStr) {
    // 用正向预查正则拆分出每个模块的标识和内容
    const parts = exampleStr.split(/(?=(Input|Output|Explanation): )/);
    const result = {};
    // 遍历拆分后的数组，整理成键值对
    for (let i = 1; i < parts.length; i += 2) {
        const key = parts[i].replace(': ', '');
        const value = parts[i + 1].trim();
        result[key] = value;
    }
    return result;
}

2. 修复列表渲染代码

<h5>Examples:</h5>
<ol>
    {arrExamples.map((example, idx) => {
        const parsedData = parseExample(example);
        // 必须返回渲染元素
        return (
            <li key={idx}>
                <ul>
                    {/* 遍历解析后的模块，生成无序列表项 */}
                    {Object.entries(parsedData).map(([key, value]) => (
                        <li key={key} style={{margin: '8px 0'}}>
                            <strong>{key}:</strong>
                            {/* 让内容换行展示，贴近期望格式 */}
                            <div style={{marginTop: '4px'}}>{value}</div>
                        </li>
                    ))}
                </ul>
            </li>
        );
    })}
</ol>

说明 #

• 解析逻辑优化：使用正向预查正则准确拆分每个模块的标识和内容，避免原逻辑的错误拆分。
• 渲染逻辑修复：在arrExamples.map中明确返回嵌套的<li>和<ul>元素，确保React能正确渲染。
• 格式与规范优化：给每个列表项添加唯一key，同时通过内联样式调整间距，让展示效果更贴近期望格式。

内容的提问来源于stack exchange，提问作者Emm