Vue中数组取值渲染组件异常求助：控制台运行正常但组件无效果，求解决方案参考方向

我编写的这段代码在控制台中运行正常，但组件渲染时出现问题，毫无头绪，恳请指点可以查阅相关解决方案的方向。

原主代码 #

Promise.all([
  DishSource.getDishDetails(523145),
  DishSource.getDishDetails(787321),
  DishSource.getDishDetails(452179),
]).then((values) => Vue.render(
  <SidebarView guests={5} dishes={values} />,
  document.getElementById("app")
));

原SidebarView组件代码 #

<table>
  {props.dishes.values.map((e) => (
    <tr>
      <td>
        <button> x </button>
      </td>
      <td>{e.title}</td>
      <td>{e.dishType}</td>
      <td>{e.dishPrice}</td>
    </tr>
  ))}
</table>

嘿，我瞅了下你的代码，踩过类似的坑，给你几个明确的排查和修复方向：

1. 数组访问方式错误（最可能的原因） #

Promise.all返回的是一个普通数组，而你在组件里写了props.dishes.values.map——values()是针对对象的方法（比如Object.values()），数组调用values()会返回一个迭代器对象，不是你要的菜品数据数组，这直接导致渲染时找不到可遍历的内容，组件自然出问题。

修复：把组件里的props.dishes.values.map改成props.dishes.map。

2. Vue渲染方式不规范 #

直接调用Vue.render()不是Vue官方推荐的组件挂载方式，这种写法可能没有正确初始化组件的上下文，导致props传递、生命周期钩子无法正常工作。

修复：换成标准的组件挂载方式：

• 如果是Vue 2：

Promise.all([
  DishSource.getDishDetails(523145),
  DishSource.getDishDetails(787321),
  DishSource.getDishDetails(452179),
]).then((values) => {
  new Vue({
    el: '#app',
    render: h => h(SidebarView, {
      props: {
        guests: 5,
        dishes: values
      }
    })
  })
});

• 如果是Vue 3：

Promise.all([
  DishSource.getDishDetails(523145),
  DishSource.getDishDetails(787321),
  DishSource.getDishDetails(452179),
]).then((values) => {
  createApp(SidebarView, {
    guests: 5,
    dishes: values
  }).mount('#app')
});

3. 别忘了给列表项加唯一key #

Vue的列表渲染要求每一项必须有唯一的key属性，否则会导致DOM更新异常，虽然不一定直接导致渲染失败，但这是Vue开发的基本规范，也能避免潜在问题。

修复：给<tr>标签加上key（用菜品的唯一ID，比如e.id）：

<table>
  {props.dishes.map((e) => (
    <tr key={e.id}>
      <td>
        <button> x </button>
      </td>
      <td>{e.title}</td>
      <td>{e.dishType}</td>
      <td>{e.dishPrice}</td>
    </tr>
  ))}
</table>

额外排查技巧 #

• 打开浏览器的Vue Devtools，查看SidebarView组件的props，确认dishes是否是预期的数组；
• 检查控制台的「Warnings」标签，Vue很多渲染问题只会抛出警告，不会显示在Errors里；
• 确认DishSource.getDishDetails返回的每个菜品对象确实包含title、dishType、dishPrice这些属性，避免渲染时出现undefined。

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