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

Question

所以我有这个应用程序，它显示从API作为JSON数据提取的随机引号。这是我第一次尝试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" }

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

Answer 1

看起来fetch中的promise没有解析。试试这个：

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>
)

这在Mount上调用了fetchMyAPI，并在单击New Quote时调用它。