时间戳

首页 > 解决方案 > 从 API 调用接收数据后，React 没有更新 UI（使用钩子）

javascript - 从 API 调用接收数据后，React 没有更新 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>

标签： javascriptreactjsreact-hooks

解决方案

您不会从传递给的箭头函数返回任何内容.map(..)。添加一个return语句或去掉周围的大括号

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

或者

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

推荐阅读