英文:
JSX not returning in function in FileReader
问题
在阅读了关于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)
});
}
英文:
After going through all the posts about FileReader, I've made sure I added the return statements and returned the elements after the reader onload, but still nothing shows up on the page. What else could be the problem at this point?
Code Snippet
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)
});
}
答案1
得分: 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} />
</>
);
}
}
查看工作示例示例
英文:
As mentioned above you cannot perform async flow inside the render phase.
Async action result should be resolved in triggering the component state, then the ui is rerendered.
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}/>
</>
)
}
}
see working example
答案2
得分: -1
我认为问题是.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} />;
});
}
英文:
I think the problem is .map method still does not have any return value.
The following sample code should work.
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} />;
});
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论