API数据未渲染-react

Question

我正在尝试呈现 API 数据，但由于某种原因，我无法做到这一点。

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

  const fetchData = () => {

    return (
      fetch('https://mocki.io/v1/b9c63035-97c5-40a0-b45c-2abdf5261bdf')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => {
        console.log('Error fetching and parsing data', error)
      })
    )
  }

useEffect(() => {
     fetchData()
  }, []);

console.log('API DATA', data) 我正在收到回复，但我不确定为什么它无法循环。我猜是因为数据是 JSON 格式？

return (
 {       
   data.length > 0 && data.map((item, index) => {
    <div key={index}>{item.title}</div>
   })
 }
)

Answer 1

通过数组映射后，您不会返回任何内容，请将 return 语句更新为：

  return (
    <>
      {data.length > 0 &&
        data.map((item, index) => {
          return <div key={index}>{item.title}</div>;
        })}
    </>
  );

或者

 return (
    <>
      {data.length > 0 &&
        data.map((item, index) => <div key={index}>{item.title}</div>)}
    </>
  );

另外，JSX 表达式应该只有一个父元素。确保将返回包装在片段中，即<>