(리액트) 자바스크립트 순차적으로 실행하기 질문

Question

js초보에요 몇시간동안 씨름했는데 안돼서 질문 올립니다ㅠㅠㅠ제가 만드려는건 1.배열을 받아와서 -> 2.그 배열을 50개까지만 자르고 ->3.그 잘린걸 10개씩 나눠서 [ [0,1,2...], [10,11,12,...], [20,21,...], ..., [... ,48,49] ]하고 2차원 배열로 만들어서사용하려는데 2번이 진행되려면 1번이 끝나있어야 하고 3번이 진행되려면 2번이 끝나있어야 하잖아요? 1번은 받아오는데가 API이다 보니 fetch(&#34;%$#&#64;&#34;).then으로 잘 해결했는데2번은 여러차례 해봤는데 잘 안되네요ㅠㅠ 아래 코드에서 useEffect안에 주석처리 안됀 부분이 2번이고 주석처리됀 부분이 3번인데순차적으로 실행하려고 promise를 썼건만 프로미스 안에서도 resolve가 먼저 실행돼서 안되는거 같아요어떻게 해야 하는건가요...??? (타이머는 쓰고 싶지 않아요)useEffect(()&#61;> { const promise &#61; new Promise((resolve, reject)&#61;>{if(!ListLoading) { setPostList((old) &#61;> /////postList는 리액트의 state입니다 { let temp &#61; []; [...ListData.slice(0,50)].map((item) &#61;> temp.push({key:item.id, title:item.title, detail:item.body, date:Date.now()})); return [...old, ...temp]; }) resolve(postList); }}) promise.then((value)&#61;>{console.log(value)}); /*for(var i&#61;1;i<&#61;Math.ceil(postList.length/10);i&#43;&#43;) { const newArray &#61; [...page,[...postList.slice(10*(i-1),10*i)]] setPage(newArray); } console.log(page);*/ },[ListLoading]);

푸르게 · Accepted Answer

resolve(postList)를 setPostList 의 callback 함수에 넣어보세요. setPostList((old) &#61;> { ... } , () &#61;> resolve(postData));

aaaa1234 · Answer

https://okky.kr/user/info/37576https://okky.kr/user/info/37576푸르게 setState가 인자를 하나만 받는다고 오류가 나는데 react hook의 useState가 아닌 다른거 인가요...??

푸르게 · Answer

아 음... 많은 것을 빼고 답변을 달았었네요. 게다가 질문이 있었는지도 몰랐습니다.늦었지만 답글을 답니다. 네 기존 useState는 callback 함수가 없습니다.그래서 만들어서 사용하죠. useStateCallback 함수를... stackoverflow에 올라온 답변 아 음... 지금 필요할 지 모르겠네요... function useStateCallback(initialState) { const [state, setState] &#61; useState(initialState); const cbRef &#61; useRef(null); // init mutable ref container for callbacks const setStateCallback &#61; useCallback((state, cb) &#61;> { cbRef.current &#61; cb; // store current, passed callback in ref setState(state); }, []); // keep object reference stable, exactly like &#96;useState&#96; useEffect(() &#61;> { // cb.current is &#96;null&#96; on initial render, // so we only invoke callback on state *updates* if (cbRef.current) { cbRef.current(state); cbRef.current &#61; null; // reset callback after execution } }, [state]); return [state, setStateCallback]; }

(리액트) 자바스크립트 순차적으로 실행하기 질문

3개의 답변

#ecmascript6 목록