React按钮点击更新数据后渲染报错：无法读取map属性

问题分析 #

• JSX中违规调用useEffect：useEffect是React Hook，只能在组件顶层或自定义Hook内使用，不能放在JSX的{}渲染表达式里，这违反了Hook的使用规则。
• map函数未返回JSX元素：你的map回调里创建了<MenuCard>但没有return，所以即使执行了map，也不会生成任何可渲染内容。
• 未处理空值/未定义情况：首次渲染或切换数据时，menulist或menulist[section]可能还未初始化，直接调用map会触发“Cannot read properties of undefined”报错。

修正后的代码示例 #

1. 正确设置menulist初始状态 #

根据你的数据结构给useState设置合理初始值，避免初始状态为undefined：

// 如果menulist是数组结构，初始化为空数组
const [menulist, setMenulist] = useState([]);
// 如果是对象结构，初始化为空对象
// const [menulist, setMenulist] = useState({});

2. 修正渲染逻辑 #

去掉JSX中的useEffect，直接做条件渲染，确保menulist[section]存在后再调用map，同时返回JSX元素：

<div className="menu">
  {/* 用可选链操作符安全判断，避免undefined报错 */}
  {menulist[section]?.map((menuItem, index) => {
    console.log("Inside Map: " + menuItem);
    // 必须返回JSX，同时给子元素加唯一key（优先用数据自身唯一id，无id时用index）
    return <MenuCard key={index} mItem={menuItem} />;
  })}
</div>

3. 优化fetch函数（可选，增加错误处理） #

原fetch逻辑可用，建议添加错误处理避免请求失败导致的状态异常：

const fetchMessages = async (num) => {
  try {
    const response = await fetch(`[url]${num}`);
    if (!response.ok) throw new Error('请求失败');
    const menuResponse = await response.json();
    console.log(menuResponse);
    setMenulist(menuResponse);
  } catch (error) {
    console.error('获取数据出错:', error);
    // 可在这里设置错误状态，给用户显示提示
  }
};

额外注意 #

• 所有React Hook必须放在组件最顶层，不能在条件判断、循环或嵌套函数内调用。
• 列表渲染时的key属性是必须的，尽量使用数据自身的唯一标识，避免用index作为key（仅当列表静态无修改时可用）。

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