簡體   English   中英

如何使用 useEffect 更好地設置 fetch?

[英]How to better setup fetch with useEffect?

我正在學習 JS 和 React,我來到下面的代碼示例和一些我不理解的部分。 second.then 在 useUffect 里面這樣可以嗎,還是在 getData func 里面更好? 渲染中還有數據**?**.map,我不明白我們為什么需要?,這是三元運算符嗎? 所以我認為三元運算符需要:作為第二個參數。 提前致謝!

import React, { useState, useEffect } from "react";

const FetchData = () => {
  const [data, setData] = useState(null);
  const fetchURL = "https://jsonplaceholder.typicode.com";
    
    const getData = () => fetch(`${fetchURL}/posts`)
        .then((res) => res.json());

    useEffect(() => {
        getData().then((data) => setData(data));
    }, []);

    return (<div>
        {data?.map(item => (
            <ul>
                <li>{item.title}</li>
          </ul>
      ))}
  </div>);
};

export default FetchData;

我認為,您的代碼很好,如果有任何錯誤,請將getData and fetchURL移動到useEffect中。

此外,您可以簡單地使用async/await方法。


import React, { useState, useEffect } from "react";

const FetchData = () => {
  const [data, setData] = useState(null) // here you can define `[]` if you don't want to check `?`
  useEffect(() => {
    const fetchURL = "https://jsonplaceholder.typicode.com";
    const getData = async () => {
      const res = await fetch(`${fetchURL}/posts`)
      const result = await res.json();
      setData(result);
    }
    getData()

  }, []);

    return (<div>
        {data?.map(item => (
            <ul>
                <li>{item.title}</li>
          </ul>
      ))}
  </div>);
};

export default FetchData;

? 稱為可選鏈運算符,它將幫助您檢查值是否為空值(null or undefined)

基本上,它只是在做if (data) { data.map...}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM