[英]Uploading Images in Browser using react issue
I'm trying to make the user upload several images to the browser using React (then save them of course to a server).我试图让用户使用 React 将几张图片上传到浏览器(然后当然将它们保存到服务器)。
The problem is when I click choose image sometimes it work and sometimes not.问题是当我单击选择图像时,有时会起作用,有时会不起作用。 Same for showing the images Here is my code:
相同的显示图像这是我的代码:
const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [selectedFiles, setSelectedFiles] = useState([]);
const [isSelected, setIsSelected] = useState(false);
const fileSelectedHandler = (event) => {
console.log(event.target.files[0]);
const files = selectedFiles;
files.push(event.target.files[0]);
setSelectedFiles(files);
setIsSelected(true);
console.log(selectedFiles);
}
const fileUploadHandler = () => {
axios.post('http://')
}
return (
<div className="container">
<p>Please Enter Category name: </p>
<TextField
id="standard-multiline-flexible"
label="Name"
multiline
rowsMax={4}
variant="filled"
color="secondary"
value={name}
onChange={(event) => setName(event.target.value)}
/>
<p>Please Enter Category Description: </p>
<TextField
id="standard-multiline-flexible"
label="Description"
multiline
rowsMax={4}
variant="filled"
color="secondary"
value={description}
onChange={(event) => setDescription(event.target.value)}
/>
<input type="file" onChange={fileSelectedHandler}/>
{
selectedFiles.length > 0 ?
<div className="row">
{
selectedFiles.map((file, index) => {
console.log(file, index);
return (
<div className="column">
<img className="added_images" width="100%" src={URL.createObjectURL(file)} thumbnail />
</div>
)
})
}
</div>
:
null
}
</div>
)
and here is my styling:这是我的造型:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
}
.column {
float: left;
width: 33.33%;
height: 200px;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
display: table;
clear: both;
}
When I debugged The selectedFiles
hook contains all the files I uploaded.当我调试时
selectedFiles
挂钩包含我上传的所有文件。 BUT the problem it is not triggering the render.但问题是它没有触发渲染。 Why is that?
这是为什么?
Here issue is you are assigning whole selectedFiles
to files
like following这里的问题是您将整个
selectedFiles
分配给如下files
const files = selectedFiles;
This will also assign reference of selectedFiles
to files
const so after pushing new value to array when you try to update selectedFiles
with files
both array reference will be same so react will not trigger re-render.这还将将
selectedFiles
的引用分配给files
const,因此当您尝试使用files
更新selectedFiles
时将新值推送到数组后,两个数组引用将相同,因此反应不会触发重新渲染。
To solve this try to shallow copy array like below:-为了解决这个问题,尝试浅拷贝数组,如下所示: -
const files = [...selectedFiles];
Or when updating array, update it with spread operators like below:-或者在更新数组时,使用如下扩展运算符对其进行更新:-
setSelectedFiles([...files]);
Or you can directly update your array state like below without copying it in new constant或者您可以像下面这样直接更新您的数组 state 而无需将其复制到新常量中
const fileSelectedHandler = (event) => {
setSelectedFiles(prevSelected => [...prevSelected, event.target.files[0]]);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.