Question

我正在尝试创建一个带有react钩子的随机报价机，并且可以对它们进行编码，但我对如何向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到新的钩子“翻译”。

Answer 1

这是对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} />;
};

如何做一个React hooks api调用并只显示一项

1 个答案: