React中列表渲染时listing输出undefined且无报错的原因排查

我来帮你分析下问题所在，主要有两个关键错误导致了listing为undefined且没有报错：

1. 错误地将类方法当作React组件渲染 #

在你的render方法里，你用了<this.burgerListing />这种写法——这是把burgerListing当成了一个React组件，但它本质上只是类的一个普通方法。React会尝试把它当作组件处理，但它并没有组件的结构（比如没有render方法或者不是函数组件），所以这个方法可能根本没被正确执行，或者执行后返回的内容无法被正常解析，最终导致listing相关逻辑出问题。

正确的做法是调用这个方法并插入它返回的JSX，也就是把代码改成：

render(){
  return(
    <div>
      {this.burgerListing()}
    </div>
  )
}

2. Map回调函数没有返回JSX元素 #

再看list.map的部分：你用了大括号{}包裹箭头函数的内容，但箭头函数的规则是——如果用大括号包裹函数体，必须显式写return，否则函数默认返回undefined。所以你的map循环会生成一个全是undefined的数组，就算list有数据，最终listing也不会是有效的JSX元素数组。

你可以用两种方式修复：

• 方式一：显式添加return

const listing = list.map( burger => { 
  return (
    <div key={burger.id}> 
      <h3>{burger.name}</h3> 
      <strong>{burger.price}</strong> 
      <p>{burger.description}</p> 
    </div> 
  )
})

• 方式二：用小括号代替大括号，让箭头函数自动返回内容

const listing = list.map( burger => (
  <div key={burger.id}> 
    <h3>{burger.name}</h3> 
    <strong>{burger.price}</strong> 
    <p>{burger.description}</p> 
  </div> 
))

额外建议：确保state初始值合法 #

另外，建议你检查组件的state初始值，确保burgerList一开始是一个空数组（而不是undefined），比如：

class YourComponent extends React.Component {
  state = {
    burgerList: []
  }
  // ... 其他代码
}

如果burgerList是异步获取的，还可以在map前加个判断，避免潜在的报错：

burgerListing = () => { 
  const list = this.state.burgerList;
  if (!list) return null; // 当list为undefined或null时返回null，避免报错
  const listing = list.map( burger => (
    <div key={burger.id}> 
      <h3>{burger.name}</h3> 
      <strong>{burger.price}</strong> 
      <p>{burger.description}</p> 
    </div> 
  ));
  console.log(listing);
  return listing;
};

把这些修改完后，你的列表应该就能正常渲染，listing也会输出正确的JSX元素数组了。

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