如何使用 fetch 和 React Hooks 处理加载数据

Question

I am new to React and somewhat new to JavaScript. I am doing a practice challenge and trying to determine how to handle useEffect with an asynchronous function so I can use the data later in the code. Currently my quote variable remains "" , but I'm trying to get it to render an actual quote from the API in the the paragraph with id of text along with author in the author paragraph. Can someone help? Disregard that I use id's repeatedly in the JSX. That is what the challenge asked for. Thanks.

The code is below but here is a link to what I have so far for the challenge within codepen.io: https://codepen.io/malbrecht13/pen/QWdNGYp?editors=0111 .

const App = () => {
  const [quote, setQuote] = React.useState('');
  const [author, setAuthor] = React.useState('');
  const [quoteNum, setQuoteNum] = React.useState(0);
  
  
  React.useEffect(() => {
    async function getQuotes() {
    const data = await fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json', {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    const json = await data.json();
    setQuote(json.quotes[quoteNum].quote);
    setAuthor(json.quotes[quoteNum].author);
    setQuoteNum(quoteNum + 1);
  }
    getQuotes();
  }, []);
  
    return (
    <div id="quote-box">
      <p id="text">{quote}</p>
      <p id="author">{author}</p>
      <a id="tweet-quote" href="twitter.com/intent/tweet">Tweet Quote</a>
      <button id="new-quote" >New Quote</button>
    </div>
  )
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
)

Answer 1

Your fetch() headers don't match the $.ajax() headers in the provided solution, so you end up getting a CORS error, preventing the response from being loaded. You had set Content-Type while they were setting Accept instead.

You should also reconsider the organization of your stateful variables, since you only need to fetch the quotes once and not each time you set the index:

const App = () => {
  const [quotes, setQuotes] = useState();
  const [index, setIndex] = useState(0);
  
  useEffect(() => {
    async function getQuotes() {
      const response = await fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json', {
        headers: {
          'Accept': 'application/json'
        }
      });
      const data = await response.json();
      setQuotes(data.quotes);
    }

    getQuotes();
  }, []);

  if (!quotes) return (
    <div id="quote-box">
      <p id="text">Loading...</p>
    </div>
  );

  const { quote, author } = quotes[index];
  const setNext = () => setIndex((index + 1) % quotes.length);

  return (
    <div id="quote-box">
      <p id="text">{quote}</p>
      <p id="author">{author}</p>
      <a id="tweet-quote" href="twitter.com/intent/tweet">Tweet Quote</a>
      <button id="new-quote" onClick={setNext}>New Quote</button>
    </div>
  );
}