리액트에서 짠 함수안에서 promise를 쓰니까 안되고 빼니까 되는 이유 채택완료
루2
3년 전
조회 1,859
되는 코드
</p>
<p>//html </p>
<p> <input
type="file"
accept="image/*"
multiple
className="file-form"
id="image"
onChange={onFileChange}
/></p>
<p> {preview.length !== 0
? preview.map(function (url, i) {
return (
<img src={preview[i]} alt="" className="att" key={i} />
);
})
: null}</p>
<p>//html end</p>
<p> </p>
<p>// js</p>
<p> const [preview, setPreview] = useState([]);</p>
<p> let SaveArray = []</p>
<p> function onFileChange(e) {
const files = Array.from(e.target.files);
if (files.length !== 0) {
setFileData(files); // 해당 함수랑 관련없음
for (var i = 0; i < files.length; i++) {
const reader = new FileReader();
reader.readAsDataURL(files[i]);
reader.onload = (e) => {
SaveArray.push(e.target.result);
let copyPreview = [...preview];
copyPreview.push(...SaveArray);
setPreview(copyPreview);
};
}
}
}</p>
<p>
//안되는 promise 코드 (js 만 달라요)
</p>
<p>function onFileChange(e) {
const files = Array.from(e.target.files);
let SaveArray = []
if (files.length !== 0) {
setFileData(files); //해당함수랑 관련없음
new promise(function(resolve){
for (var i = 0; i < files.length; i++) {
const reader = new FileReader();
reader.readAsDataURL(files[i]);
reader.onload = (e) => {
SaveArray.push(e.target.result);
if(i === files.length){
resolve(SaveArray)
}
};
}
}).then((result)=>{
setPreview(result)
})
}
}</p>
<p>
안녕하세요 input type = "file"에서 사진을 업로드 한 뒤에 화면에 뿌려주는 함수를 짰습니다,
확실하게 데이터를 주고 받게 할려고 데이터를 다 추출한뒤에, resolve로 결과값을 넣어준 다음
then에서 setState처리를 할려는데요 이론상으론 완벽한데 promise를 쓰면 안되고 빼면 됩니다
결과적으로 되는 코드인데 왜 promise를 사용하면 안되는지 이유를 알 수가 없어서 혹시 아시는분
계실까요?
뭐가 안되냐면 사진 두개를 업로드 하고
preview를 map 돌렸을때 두개 다 떠야되는데 맨 첫번째꺼 또는 맨 뒤에꺼만 뜹니다
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인
일때 resolve를 호출할려고 하는데 콘솔로 바꾸니까 i가 시작지점인 0부터 시작되네요...
고칠려고 고민하고있습니다
}
혹시 async / await에 대해 잘 아시면 제가 후에 올릴 질문도
한번 봐주시면 감사하겠습니다