React中map函数未执行：单链表数据展示问题求助

问题根源分析 #

你的代码里有几个关键问题导致点击按钮后map函数不执行渲染：

1. map回调未返回JSX元素：当前map里的JSX没有显式return，React无法识别要渲染的内容。
2. 组件参数接收错误：函数组件的参数是props对象，你直接把start和setdisp作为独立参数接收，会导致无法正确获取传入的值。
3. logic函数的潜在风险：如果start.props的结构不符合预期（比如ptr或n不存在），会导致生成的数组为空，自然没有内容渲染。

修复步骤与代码调整 #

1. 修正map回调的返回值

把map里的大括号换成小括号（或显式添加return），同时必须给渲染元素加key属性：

listdata.map((i) => (
    <div className="d-flex align-items-center" key={i}>
        <div className="box">{i}</div>
        <div className="arrow"></div>
    </div>
))

2. 正确接收组件props

函数组件的参数是一个props对象，需要通过解构获取start和setdisp：

const SDisplay = ({ start, setdisp }) => {
    // ... 原有逻辑
}

3. 优化logic函数的健壮性

添加空值判断，用push简化数组赋值，避免因单链表结构异常导致的错误：

const logic = (start) => {
    if (!start?.props) return [];
    let temp = start.props;
    let arr = [];
    while(temp) {
        arr.push(temp.n);
        if (!temp.ptr) break;
        temp = temp.ptr;
    }
    return arr;
}

4. 简化状态更新逻辑

logic函数已返回新数组，无需额外扩展，直接传入即可：

<input 
    type="button" 
    onClick={() => setlistdata(logic(start))} 
    value="Display"
/>

完整修复后的代码 #

import { useState } from "react"
import { Container } from "react-bootstrap"
import "./css/style.css"

const logic = (start) => {
    if (!start?.props) return [];
    let temp = start.props;
    let arr = [];
    while(temp) {
        arr.push(temp.n);
        if (!temp.ptr) break;
        temp = temp.ptr;
    }
    return arr;
}

const SDisplay = ({ start, setdisp }) => {
    const [ listdata, setlistdata ] = useState([])

    return (
        <>
            <Container>
                <input 
                    type="button" 
                    onClick={() => setlistdata(logic(start))} 
                    value="Display"
                />
                {
                    listdata.map((i) => (
                        <div className="d-flex align-items-center" key={i}>
                            <div className="box">{i}</div>
                            <div className="arrow"></div>
                        </div>
                    ))
                }
                <a 
                    href="#" 
                    onClick={(e) => {
                        e.preventDefault(); // 阻止默认跳转行为
                        setdisp.display(false);
                    }} 
                    className="text-decoration-none text-dark"
                >
                    Back
                </a>
            </Container>
        </>
    )
}

export default SDisplay

额外优化：给Back链接添加e.preventDefault()，避免点击后跳转到页面顶部。

内容的提问来源于stack exchange，提问作者Om J Patel