React遍历FileList仅能打印控制台却无法渲染内容，缺失什么概念？

你没法渲染内容的核心原因是误用了forEach方法生成JSX元素：

forEach的作用只是遍历数组执行回调逻辑，它不会收集回调里return的内容，最终post变量的值是undefined，React自然没法渲染undefined的内容。而React渲染列表需要的是一个JSX元素组成的数组，这时候应该用map方法——map会遍历数组，把每个回调的返回值收集成新数组返回，刚好符合React的渲染需求。

renderEligibilityDocs(e) {
  var proctorDocChanges = this.state.proctorDocChanges;
  var files = proctorDocChanges[313];
  console.log("files", files);
  if (files) {
    // 将forEach替换为map，map会返回JSX元素数组供React渲染
    var post = Array.from(files).map(file => {
      return (
        <div key={file.name}>
          <h2>file: {file.name}</h2>
        </div>
      );
    });

    Array.from(files).forEach(file => console.log("Print to Console " + file.name));
    return <div>{post}</div>;

  } else {
    return <div>
      <span>No Files Uploaded</span>
    </div>;
  }
}

• forEach：仅执行遍历操作，无返回值，适合做不需要收集结果的逻辑（比如你之前打印文件名的操作）。
• map：遍历数组并返回新数组，每个元素是回调的返回值，是React中生成列表JSX的标准方式。

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