Api 數據未呈現 - 反應

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 表達式應該只有一個父元素。 確保將返回包裝在一個片段中，即<>

Answer 2

我更喜歡axios和useRef為 API

  const [myData, setMyData, myDataRef] = useStateRef([]);

  const getData = () => {
    axios
      .get("https://mocki.io/v1/b9c63035-97c5-40a0-b45c-2abdf5261bdf")
      .then((res) => {
        let data = res.data;
        console.log(data);
        setMyData(data);
      });
  };

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



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