[React]Syncfusion DropdownList itemTemplate not render after datasource rebind, 씽크퓨전 드롭박스 데이터 리스트 렌더링 후 화면에 값 안 보일 때 해결

[DropdownList itemTemplate not render after datasource bind]

프론트에서 Id 값에 따라 데이터를 불러오고 화면에 보여줘야하는데

Syncfusion dropdownlist에서 값이 안 보이는 현상이 발생했다.

 

main component를 중심으로 child component에 각각 useeffect를 사용해서

dropdownlist datasource에 들어갈 데이터를 api로 불러오고 있었다.

 

예시)

<FormDropDown
  cssClass="e-outline e-small"
  name="state"
  placeholder="시/도"
  value={data.custInfo.state}
  fields={{ text: "name", value: "id" }} 
  dataSource={address}
  onChange={onChangeInfo}
/>

address는 object 형태였는데, datasource가 먼저 불러와지는데도 value binding이 안됐다

datasource에 단순히 ["서울", "경기"] 리스트 형태로 값을 넣으면 binding이 잘 되었는데

API로 UseState에 저장하는 데이터 형식만 binding이 안됐다. 

 

해결)

드롭다운 목록을 완전히 받아온 후 데이터 바인딩을 해야한다.

메인에서 모든 기준 정보를 불러오고, 완료 후에 id로 detail을 조회했다.

부모 컴포넌트의 useeffect는 자식 컴포넌트의 useeffect가 완전히 실행된 후 실행된다고 했는데,,

왜 자식 useeffect 모두 실행되고 부모 useeffect를 실행해서 데이터 바인딩을 했는데 안되는지는 모르겠지만

아무튼 부모 컴포넌트에서 기준 정보를 모두 불러오고 완료 후에 데이터를 조회하는 식으로 수정했더니 잘 된다!

useEffect(() => {
    const fetchBaseData = async () => {
      try {
        Loading({ type: "LOADING" });
        // 기본 정보 가져오기
        const [
          addressRes,
          projectRes,
          ...
        ] = await Promise.all([
          Api.GetAddress(),
          Api.Get("project"),
          ...
        ]);
        setAddress(addressRes);
        setProject(projectRes);
        ...
		// 기준 정보 가져온 후 상세 정보 조회
        if (id) {
          Api.Get(id)
            .then((res) => {
              setData(res);
              setFlag(true);
            })
            .catch((err) => {
              let msg = ErrorHandler(err);
              console.log(msg);
            });
        } else setData(INIT);
      } catch (err: any) {
        let msg = ErrorHandler(err);
        console.log(msg);
      } finally {
        Loading({ type: "COMPLETE" });
      }
    };

    fetchBaseData();
  }, [Loading, id]);

 

 

좋은 의견 있으시면 댓글 남겨주세요!