[TS] Axios 를 이용해 res.data를 useState의 저장하는법

[희라]

대분류 셀렉터의 버튼의 Text 값을 axios.get 요청으로 params type 의 value로 보내고,
응답 데이터를 받으면 그걸 useState의 저장했다가 map으로 뿌려주는 코드를 작성하고 있습니다.
res.data 를 받아오는 건 성공했는데 useStete의 저장하려고 하니 null 이 뜹니다 ㅜㅜ
upperText는 버튼의 text 값입니다

const [categorie, setCategorie] = useState(null);
const data = () => {
axios
.get(`/api/products/review-search`, {
 params: { type: upperText },
})
.then((res) => {
 console.log(`res.data`, res.data); // => 콘솔에 데이터 잘 찍힙니다
setCategorie(res.data); 
 console.log(`categorie`, categorie); // => null 이라고 찍힙니다
})
.catch(function (error) {
if (error.response) {
 console.log(`error.response.data`, error.response.data);
 console.log(`error.response.status`, error.response.status);
 console.log(`error.response.headers`, error.response.headers);
} else if (error.request) {
 console.log(`error.request`, error.request);
} else {
 console.log('Error', error.message);
}
 console.log(`error.config`, error.config);
});
};

<div onClick={handleSelect} >
{categorie.name.map((product, idx) => {  //categorie 개체가 null 이라고 오류가 납니다 
return (
<button key={idx}>{product.name}</button>
 );
})}
</div>

[codingapple]

state에 뭐가 들어있으면 map하라고 if문같은거 추가합시다

[글쓴이]

글