React函数组件遍历字符串数组不生效，求语法问题排查

问题原因 #

你代码里用forEach遍历数组尝试渲染元素，但forEach没有返回值（它的返回值是undefined），React无法识别undefined作为可渲染内容，所以遍历后的元素不会显示。

修复代码 #

把forEach替换成map，map会返回新的元素数组，React可以直接渲染这个数组。另外要给每个遍历生成的元素加上唯一的key属性（React列表渲染的强制要求）：

const MyFunctionComponent = ({status}) => {
  // 增加容错处理：避免status.errorMessage不存在时split报错
  const consolidatedErrorMsg = status.errorMessage?.split("-") || []; 
  return (
      <div>
          {status.status && (
              <div>
                  <p>
                      <Icon
                          name={status.status === 'success' ? 'success' : 'error'}
                      />
                  </p>
                  {
                      consolidatedErrorMsg.map((msg, i) => {
                          // 用索引作为key（若msg本身唯一，也可直接用msg作为key）
                          return <div key={i}>{msg}</div>; 
                      })
                  }
              </div>
          )}
      </div>
  )
};

额外提示 #

• 建议在split前加上可选链?.并设置默认空数组，避免status.errorMessage为undefined或null时抛出错误。
• 尽量不要用索引作为key（如果数组元素会发生排序、增删操作），若每个msg内容唯一，直接用msg作为key会更稳妥。

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