React中用map+Props渲染Jokes组件失败，求排查与替代方案

首先看你提供的代码，核心问题是列表渲染时缺少唯一key属性，另外也需要确认文件路径是否完全匹配（比如文件名大小写、后缀是否一致）。

你的原代码（已转译中文内容） #

Joke.js #

import React from 'react'
export default function Joke(props) {
    return (
        <div>
            {props.setup && <h3>铺垫：{props.setup}</h3>}
            <p>笑点：{props.punchline}</p>
            <hr />
        </div>
    )
}

Jokes.js #

export default [
    {
        setup: "我给女儿送了个冰箱当生日礼物。",
        punchline: "等她打开冰箱时，我已经迫不及待想看她脸上惊喜的表情了。"
    },
    {
        setup: "黑客是怎么躲过警察追捕的？",
        punchline: "他直接用勒索软件（ransomware，谐音「拦着我」）！"
    }
]

App.js #

import React from "react"
import Joke from "./Joke"
import jokesData from './Jokes'
export default function App() {
    const jokeElements = jokesData.map(joke => {
        return <Joke setup={joke.setup} punchline={joke.punchline} />
    })
    return (
        <div>
            {jokeElements}
        </div>
    )
}

问题修复方案 #

React要求用map渲染的列表项必须添加唯一的key属性，这是React识别列表元素、优化渲染的关键。

临时方案（适合小列表） #

用数组索引作为key，修改App.js：

import React from "react"
import Joke from "./Joke"
import jokesData from './Jokes'

export default function App() {
    const jokeElements = jokesData.map((joke, index) => {
        // 给Joke组件添加key属性
        return <Joke key={index} setup={joke.setup} punchline={joke.punchline} />
    })
    return (
        <div>
            {jokeElements}
        </div>
    )
}

推荐方案（生产环境） #

给每个笑话对象添加唯一id字段，这样即使列表顺序变化，React也能正确识别元素：
修改Jokes.js：

export default [
    {
        id: 1,
        setup: "我给女儿送了个冰箱当生日礼物。",
        punchline: "等她打开冰箱时，我已经迫不及待想看她脸上惊喜的表情了。"
    },
    {
        id: 2,
        setup: "黑客是怎么躲过警察追捕的？",
        punchline: "他直接用勒索软件（ransomware，谐音「拦着我」）！"
    }
]

然后修改App.js里的key：

return <Joke key={joke.id} setup={joke.setup} punchline={joke.punchline} />

其他展示笑话的方法 #

1. 取消独立组件，直接在App内渲染（适合简单场景）：

import React from "react"
import jokesData from './Jokes'

export default function App() {
    return (
        <div>
            {jokesData.map(joke => (
                <div key={joke.id}>
                    {joke.setup && <h3>铺垫：{joke.setup}</h3>}
                    <p>笑点：{joke.punchline}</p>
                    <hr />
                </div>
            ))}
        </div>
    )
}

2. 用React.Fragment避免多余嵌套：
   修改Joke.js，用Fragment替代外层div，减少DOM层级：

import React from 'react'
export default function Joke(props) {
    return (
        <React.Fragment>
            {props.setup && <h3>铺垫：{props.setup}</h3>}
            <p>笑点：{props.punchline}</p>
            <hr />
        </React.Fragment>
    )
}

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