React中如何正确渲染answer对象photo属性内所有图片的src

问题原因 #

你当前的handleImages方法使用forEach遍历图片数组，forEach本身没有返回值，就算你在循环内部写了return语句，也只是跳出当前循环，整个方法最终返回的是undefined，所以页面不会渲染任何图片元素。

修正方案 #

把遍历方法换成map，map会返回一个由你return的元素组成的新数组，React可以直接渲染这个数组。同时别忘了给每个img标签加唯一key属性，避免React抛出列表渲染警告。

修正后的完整代码如下：

import React from 'react'; // 你当前代码没有用到useState，可以直接删除无用导入

const Answer = ({answerObj}) => {
  // 替换forEach为map，返回整个元素数组
  const handleImages = () => {
    return answerObj.photo.images.map((pic, index) => (
      <img 
        key={index} // 生产环境建议用图片的唯一标识作为key，无对应字段时可暂用index替代
        src={pic}
        alt="相关配图" 
        width="200px"
        height="200px"
      />
    ));
  };

  return (
    <div>
        <div className="photoInfo">
          <br />
          <p>{answerObj.photo.photoBody}</p>
          <br />
          {answerObj.photo.images.length > 0 ? (
          <div>
            {handleImages()}
          </div>): null}
        </div>
      </div>
  );
};

export default Answer;

你也可以选择省略单独的方法封装，直接在JSX里内联写遍历逻辑，写法更简洁：

{answerObj.photo.images.length > 0 && (
  <div>
    {answerObj.photo.images.map((pic, index) => (
      <img 
        key={index}
        src={pic}
        alt="相关配图" 
        width="200px"
        height="200px"
      />
    ))}
  </div>
)}

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