各位大大您好!最近遇到一個棘手的問題想向各位請教~

當我進去某個指定人物的頁面後，會利用useEffect來執行第一次的render，從資料庫抓取該角色的詳細資料，並將其存入到useState的array中，並將其資料render至該頁面中，但遇到了一個問題，進去頁面時會質性第一次render，在執行useEffect(也就是抓取該人物的詳細資料)，但第一次render時，還未抓取到該人物的資料，造成undefined，想請問該怎麼辦QQ

ChampionDetails.js :

const ChampionsDetail = () => {
  const location = useLocation();
  const history = useHistory();
  const { name, id } = useParams();  // name:Iron man ; id:1
  const [champDetails, setChampDetails] = useState({ clothes: {}, skills: {}});
  const championInfo = location.state;

  /* 畫面初始值 */
  useEffect(() => {
    fetchChampionDetail();
    document.title = `${name}'s Detail`;
  },[]);

  /* function fetchDetail 抓取該人物的詳細資料 */
  const fetchChampionDetail = async () => {
    const result = await Axios.get(
      `http://localhost:3001/champions_detail/id=${id}&${name}`
    );
    Axios.all([result])
      .then(
        Axios.spread((result) => {
          setChampDetails({
            clothes: result.data[0],
            skills: result.data[1]
          });
        })
    )
      .catch((errors) => {
        console.error(errors);
      });    
  };


  /* function handleBackClick */
  const handleBackClick = () => {
    history.goBack();
  };

  return (
    <div>
      <h1>
        Champion {name}'s Detail Pages
      </h1>
      <button
        onClick={() => {
          handleBackClick();
        }}
      >Back to the Champion Page</button>
          <p>{champDetials.clothes[0].clothes_name}</p>
    </div>
  );
}
export default ChampionsDetail;

{champDetials.clothes[0].clothes_name}在這裡出錯了
先謝謝各位的幫忙!!，仍在學習中，任何指教都願意聆聽~