React中使用.map渲染对象数组列表无显示问题排查

你的代码存在两个关键问题导致页面无内容显示：

• returnList函数未返回map结果：你在map回调里返回了JSX元素，但整个returnList函数没有返回map方法生成的数组，最终函数默认返回undefined，React无法渲染undefined，因此页面为空。
• 拼写错误（非功能性但需修正）：状态变量poeple应为people，虽然不影响功能，但不符合英文拼写规范，建议修正。

修正后的代码 #

import { useState } from "react";

function Question4Comp(props) {
  
  const [people, setPeople] = useState( [ {"Name": "Dana", "Age": 20, "City": "Haifa" },
                                        {"Name": "Ron", "Age": 22, "City": "Tel Aviv" }, 
                                        {"Name": "Dov", "Age": 31, "City": "Ashdod" }, 
                                        {"Name": "Vered", "Age": 19, "City": "Eilat" }] );

  function returnList() {
    // 新增return，让函数返回map生成的JSX数组
    return people.map( (item, index) => { 
      return <li key={index}>
                {item.Name}
                <ul>
                  <li> Age: {item.Age} </li>
                  <li> City: {item.City} </li>
                </ul> 
             </li>      
    })
  }

  return (
    <div className="App">
      <ul>
        {returnList()}
      </ul>
    </div>
  );
}

export default Question4Comp;

额外提示：尽量避免用index作为元素key（如果数组元素存在排序、增删场景），优先使用对象的唯一标识（比如item.Name，若名称唯一），这能提升React渲染性能并避免潜在问题。

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