在 React with Hooks 中获取 JSON 的正确方法是什么?
What is the proper way to fetch JSON in React with Hooks?
所以我有这个应用程序显示 运行dom 引号,这些引号作为 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
});
}
最初是在组件 class 中调用的,如下所示:
/* 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)
只是 returns
之外,不会抛出任何错误
Promise { <state>: "pending" }
Promise { <state>: "pending" }
我是否正确使用了 Hooks?如何使用 JSON 数据正确更新状态?
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
时调用它。
所以我有这个应用程序显示 运行dom 引号,这些引号作为 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
});
}
最初是在组件 class 中调用的,如下所示:
/* 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)
只是 returns
Promise { <state>: "pending" }
Promise { <state>: "pending" }
我是否正确使用了 Hooks?如何使用 JSON 数据正确更新状态?
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
时调用它。