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