React中为何将props数组map移出render函数后失效？

嘿，我之前也遇到过一模一样的情况！把render里的map逻辑抽出去之后突然不生效，大概率是这几个常见问题导致的，咱们一个个排查：

1. 忘记返回map的结果 #

这是最容易踩的坑！当你把map移到单独函数里，很容易漏掉return语句，导致函数默认返回undefined，自然看不到渲染结果。

错误示例： #

const renderListItems = () => {
  // 这里没有return，函数返回undefined
  props.items.map(item => <div key={item.id}>{item.content}</div>)
}

正确写法： #

要么显式return：

const renderListItems = () => {
  return props.items.map(item => <div key={item.id}>{item.content}</div>)
}

要么用箭头函数的隐式返回（去掉大括号）：

const renderListItems = () => 
  props.items.map(item => <div key={item.id}>{item.content}</div>)

2. 函数无法正确访问props #

如果你的外部函数没有拿到正确的props，map自然没法执行。分两种组件类型来看：

函数组件场景 #

要确保函数能访问到props，可以把props作为参数传入函数：

const MyComponent = (props) => {
  // 把items作为参数传进来，避免作用域问题
  const renderListItems = (items) => {
    return items.map(item => <div key={item.id}>{item.content}</div>)
  }

  return <div>{renderListItems(props.items)}</div>
}

类组件场景 #

类组件里要注意this的指向，推荐用箭头函数定义外部函数，自动绑定this：

class MyComponent extends React.Component {
  // 箭头函数自动绑定this，能拿到this.props
  renderListItems = () => {
    return this.props.items.map(item => <div key={item.id}>{item.content}</div>)
  }

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

3. 未处理数组为空/未初始化的边界情况 #

有时候props里的数组可能一开始是undefined或者空数组，移到外部函数后没做判断，导致渲染出null或者报错。可以加个兜底判断：

const renderListItems = (items) => {
  // 先判断数组是否存在且有内容
  if (!items || items.length === 0) {
    return <p>暂无数据</p>
  }
  return items.map(item => <div key={item.id}>{item.content}</div>)
}

4. 不小心漏掉了key属性 #

虽然你在render里正常，但抽离函数时可能不小心把key属性弄丢了。React要求列表元素必须有唯一的key，这是渲染列表的必要条件，别忘加！

先从这几点排查，基本就能解决问题啦～

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