[mbti 사이트] 에러👻

상황🤔

sweetalert2 + useRef를 쓸경우

Swal.fire({
    icon: "success",
    title: "성공!",
    text: "성공적으로 닉네임이 변경되었습니다.",
}).then(() => {
	inputRef.current.focus();
});

에러👻

경고문 + focus가 안먹힘

해결과정👀

=> 0을 줘도 안됨

=> index.html에 aria-hidden="false"을 줘도 안됨

=> didClose기능을 써도 안됨

해결🌟

짧게 setTimeout을 주기

setTimeout(() => {
  inputRef.current.focus();
}, 500);

---

상황🤔

List컴포넌트에서 tanstack query의 데이터를 map으로 뿌리고,

Item컴포넌트에서 props로 받은 데이터를 구조분해하여 ui에 표기하면 오류가 났음

//List.jsx
{testResults.map((data) => (
	<TestResultItem key={data.id} data={data} />
))}

//Item.jsx
const { visibility, resultData, timestamp, userData } = data;
...
{
	<div>
      <div className="flex items-center">
        <strong>{userData.id}</strong>
        <span>{userData.nickname}</span>
      </div>
      <div>
        <strong>{resultData}</strong>
      </div>
      <div className="flex justify-end">
        <button
          type="button"
          onClick={() => toggleMutation.mutate(userData?.id)}
          className="button-style"
        >
          {visibility ? "비공개" : "공개"}
        </button>
        <button
          type="button"
          onClick={() => removeMutation.mutate(userData?.id)}
          className="button-style"
        >
          삭제
        </button>
      </div>
    </div>
  }

에러👻

해결과정👀

=> Item컴포넌트의 data를 단축평가로 가져와서 {data && (...)} 해도 안됨 (data가 빈배열이라도 넘어가기때문에 비추)

=> List컴포넌트의 map돌리기전에 옵셔널체이닝으로 {testResults?.map(...)}해도 안됨 (testResults가 빈배열이라도 있다고 간주하여 비추)

 

해결🌟

- List컴포넌트의 testResults.length가 0보다 클때에 map돌리기

- Item컴포넌트의 data를 단축평가에서 Object.keys(data).length > 0으로 바꾸기

//List.jsx
{testResults.length === 0 ? (
    <p>아직 테스트 결과가 없습니다.</p>
  ) : (
    testResults.map((data) => <TestResultItem key={data.id} data={data} />)
)}

//Item.jsx
{Object.keys(data).length > 0 && (
   ...
)}