JSX没有在FileReader中返回函数[重复]答案

【问题标题】：JSX not returning in function in FileReader [duplicate]JSX没有在FileReader中返回函数[重复]
【发布时间】：2020-01-03 05:54:50
【问题描述】：

在浏览了有关 FileReader 的所有帖子后，我确定我添加了返回语句并在阅读器加载后返回了元素，但页面上仍然没有显示任何内容。此时还有什么问题？

代码片段

 function showImages() {
  return Array.from(this.state.images).map(image => {
    var reader = new FileReader();
    reader.onload = function(e) {
      return <Image key={image.name} src={"data:image/png;base64," + e.target.result} />
    };
    reader.readAsDataURL(image)
  });
}

【问题讨论】：

能否请您添加代码而不是图像？这将有助于人们快速调试。
您没有返回图像组件，请尝试 Siva 发布的以下答案，我希望它会起作用
渲染阶段不能有异步代码。您必须同步渲染，然后在一个钩子中（如componentDidMount、useEffect 或简单的事件回调），执行异步任务并将结果保存在状态中。

标签： javascript reactjs filereader

【解决方案1】：

如上所述，您不能在渲染阶段执行异步流。异步动作结果应该在触发组件状态时解决，然后重新渲染ui。

class Images extends Component{

  state = {images: []};

  ref = React.createRef();

  showImages = () => {
  const files = this.ref.current.files;
  Array.from(files).forEach(img => {
    const reader = new FileReader();
   reader.onload = () => {
   this.setState(({images}) => ({images: [...images, reader.result]}));
  }
    reader.readAsDataURL(img);
  })
  }
  render(){
    return(
      <>
      {!!this.state.images.length && this.state.images.map(img => (<img style= 
      {{width:"auto", height:100}} src={img}/>))}
      <input type="file" multiple ref={this.ref} onChange={this.showImages}/>
      </>
    )
  }
}

见工作example

【讨论】：

【解决方案2】：

我认为问题是.map 方法仍然没有任何返回值。以下示例代码应该可以工作。

function showImages() {
  return Array.from(this.state.images).map(image => {
    let src = "";
    var reader = new FileReader();
    reader.onload = function(e) {
      src = `data:image/png;base64,${e.target.result}`;
    };
    return <Image key={image.name} src={src} />;
  });
}

【讨论】：