时间戳

首页 > 解决方案 > 如何进行反应钩子API调用并仅显示一项

reactjs - 如何进行反应钩子API调用并仅显示一项

问题描述

我正在尝试创建一个带有反应钩子的随机报价机，我可以编写一个它们的列表以显示，但我很困惑如何向 useEffect 函数添加步骤以只显示一个随机的。

我可以通过映射它们来列出每个报价，但我不知道 useEffect 在哪里让它只选择一个报价并显示它。我知道如何为类组件编写代码，但我将如何更新它以反映反应钩子。

class RandomQuote extends Component {
   constructor(props) {
      super(props)
      this.state = {
         quote: '',
         author: ''
      }
   }
componentDidMount() {
  this.getQuote()
}

getQuote() {
  let url = 
'https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json'

    axios.get(url)
      .then(res => {
        let data = res.data.quotes
        let quoteNum = Math.floor(Math.random() * data.length)
        let randomQuote = data[quoteNum]

        this.setState({
          quote: randomQuote['quote'],
          author: randomQuote['author']
         })
      })
   }

getNewQuote = () => { //will be called on clicking the New Quote button
  this.getQuote()
}

const [data, setData] = useState({ quotes: [
    {quote: '', author: ''}
  ] });

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json',
      );
      setData(result.data);
    };
    fetchData();
  }, []);

我只需要帮助将旧的 React “翻译”为新的钩子。

标签： reactjsreact-hooks

解决方案

这是对 React Hooks 的完整“翻译”：

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

const RandomQuote = props => {
    const [quote, setQuote] = useState("");
    const [author, setAuthor] = useState("");

    function getQuote() {
        const url =
            "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json";

        axios.get(url).then(res => {
            const data = res.data.quotes;
            const quoteNum = Math.floor(Math.random() * data.length);
            const randomQuote = data[quoteNum];

            setQuote(randomQuote.quote);
            setAuthor(randomQuote.author);
        });
    }

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

    const onButtonClick = useCallback(event => {
        getQuote();
    }, []);

    return <button onClick={onButtonClick} />;
};

推荐阅读