API 호출에서 데이터를 수신한 후(후크 사용) 반응이 UI를 업데이트하지 않음

API 호출에서 데이터를 수신한 후(후크 사용) 반응이 UI를 업데이트하지 않음

const [data, setData] = useState(null);

  useEffect(() => {
    const getData = async () => {
    await fetch('http://localhost:4000/data')
    .then(res => res.json())
    .then(fetchedData => { 
      setData(fetchedData); 
      console.log(fetchedData) 
    })}
    getData();
  }, [])

  return (
    <div className="App">
      <Header />    
      <ul>{ data &&
        data.map((item, index) => {
          item.map(object => {
            Object.keys(object).map((key) => 
               (<li key={index}>{object[key]}</li>)
            );
          })
        })}</ul>
    </div>

데이터 구조는 다음과 같다.[[{'sum': 210}], [{'total': 210}], [{'free': 210}], [{'discounted': 210}]]

콘솔에 데이터를 기록할 때 데이터를 표시하지만 UI에는 아무 것도 표시되지 않음<ul></ul>

전달된 화살표 기능에서 아무 것도 반환하지 않는 경우.map(..). 또는 a를 추가하십시오.return주위의 곱슬곱슬한 괄호를 없애거나 말함

data.map((item, index) => 
  item.map(object => 
    Object.keys(object).map((key) => 
      (<li key={index}>{object[key]}</li>)
    )
  )
)

OR

data.map((item, index) => {
  return item.map(object => {
    return Object.keys(object).map((key) => 
      (<li key={index}>{object[key]}</li>)
     );
  })
})

참조URL: https://stackoverflow.com/questions/63619755/react-is-not-updating-the-ui-after-receiveing-data-from-the-api-call-using-hook