在 React with Hooks 中获取 JSON 的正确方法是什么？答案

【问题标题】：What is the proper way to fetch JSON in React with Hooks?在 React with Hooks 中获取 JSON 的正确方法是什么？
【发布时间】：2020-03-10 00:57:22
【问题描述】：

所以我有这个应用程序，它显示作为 JSON 数据从 API 中提取的随机引号。这是我第一次尝试 React，所以它做得不是很好。最初，我将所有代码存储在一个组件中 - 但这显然不是最佳实践，因为我有多个可以拆分为组件的东西，即报价、页脚、共享按钮。

我在拆分时遇到的问题是我不知道如何在组件文件之间共享状态（用于共享到 Twitter 或其他附加功能），因为我获取这样的数据：

/* this function accesses the API and returns a json */
export default function fetchQuote() {
    return fetch('https://programming-quotes-api.herokuapp.com/quotes/random') // fetch a response from the api
        .then((response) => { 
            let json = response.json(); // then assign the JSON'd response to a var
            return json; // return that bad boy
    });
}

最初是在组件类中调用的，如下所示：

/* component for the quotes */
export default class Quote extends React.Component {
    /* placeholder */
    constructor(props) {
        super(props);
        this.state = {
            quoteAuthor: "Rick Osborne", 
            quote: "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
        }
    }
    /* actually render things */
    render() {
        return (
            <div className="quotes">
                <h1>{this.state.quoteAuthor}</h1>
                <p>{this.state.quote}</p>
                <div className="button">
                    <button id="button" onClick={this.update}>New quote</button>
                </div>
            </div>
        );
    }

    /* async fetch the quotes and reassign the variables to them once processed */
    update = async() => {
        let response = await fetchQuote();
        console.log(response);
        this.setState({
            quoteAuthor: response.author,
            quote: response.en
        });
    };   
}

根据我的理解，React 的钩子似乎解决了我的问题，因为我可以使用 useState 和 useEffect，我尝试按如下方式实现（原始的 fetchQuote() 函数保持不变）：

export default function Quote() {
    const [author, setAuthor] = useState("Rick Osborne");
    const [quote, setQuote] = useState(
        "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
        );
    let json = fetchQuote();

    useEffect (() => {
        setAuthor(json.author);
        setQuote(json.quote);
        console.log(json);
    });

    return (
        <div className="quotes">
            <h1>{author}</h1>
            <p>{quote}</p>
            <div className="button">
                <button id="button" onClick={async () => json = await fetchQuote()}>
                    New quote
                </button>
            </div>
        </div>
    )
}

但是，除了显示引号的区域显示为空并且在useEffect 中调用console.log(json) 时，不会引发错误

Promise { <state>: "pending" }
Promise { <state>: "pending" }

我是否正确使用 Hooks？如何使用 JSON 数据正确更新状态？

【问题讨论】：

标签： javascript reactjs state react-hooks react-state

【解决方案1】：

看起来 fetch 的承诺没有解决。试试这个：

export default Quote = () => {
    const [author, setAuthor] = useState("Rick Osborne");
    const [quote, setQuote] = useState('');

    const fetchMyAPI = async () => {
      let json = await fetchQuote();
      setAuthor(json.author);
      setQuote(json.quote);
    }

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

    return (
        <div className="quotes">
            <h1>{author}</h1>
            <p>{quote}</p>
            <div className="button">
                <button id="button" onClick={fetchMyAPI}>
                    New quote
                </button>
            </div>
        </div>
    )

这称为 fetchMyAPI onMount，并在您单击 New Quote 时调用它。

【讨论】：