[英]How to use life cycle methods /functions in React Hook?
以下组件有什么问题? 它抛出一个错误,而带有生命周期方法的原始基于类的版本工作正常吗?
import React, { useState, useEffect } from "react";
import axios from "axios";
const NewsHook = ()=> {
const [mount, setMount] = useState(false);
const [news, setNews] = useState([]);
useEffect(() => {
setMount(true);
axios.get('https://hn.algolia.com/api/v1/search?query=react')
.then(result => {
if (mount){
setNews({
news: result.data.hits,
})
}
}
);
return () => {
setMount(false);
}
}, [mount]);
return (
<ul>
{news.map(topic => (
<li key={topic.objectID}>{topic.title}</li>
))}
</ul>
);
}
export default NewsHook
问题是因为正在获取数据。 所以新闻仍然是空的。 要么使用异步来解决问题,要么以这种方式做:)
import React, { useEffect, useState } from "react";
import axios from "axios";
import "./styles.css";
export default function App() {
const [mount, setMount] = useState(false);
const [news, setNews] = useState([{ new: null }]);
useEffect(() => {
setMount(true);
axios
.get("https://hn.algolia.com/api/v1/search?query=react")
.then(result => {
setNews({ new: result.data.hits });
});
return () => {
setMount(false);
};
}, [mount]);
return (
<div>
<ul>
{news.new == null ? (
<h2>Loading</h2>
) : (
news.new.map(item => {
return <li key={item.objectID}>{item.title}</li>;
})
)}
</ul>
</div>
);
}
它会解决你的问题。 希望它有帮助:)
解决办法是:
setNews(result.data.hits);
您不需要设置挂载状态,因为 useEffect 将在组件挂载时自动工作,如果您希望它只工作一个,则添加空数组 [] 作为第二个参数
并且您必须将您的 Axios 请求包装在 useEffect 中到一个像这样的异步函数中:
import React, { useState, useEffect } from "react";
import axios from "axios";
const NewsHook = ()=> {
const [news, setNews] = useState([]);
useEffect(() => {
const getNews = async () => {
const result = await axios.get('https://hn.algolia.com/api/v1/search?query=react');
setNews({
news: result.data.hits,
})
};
getNews();
}, []);
return (
<ul>
{news.map(topic => (
<li key={topic.objectID}>{topic.title}</li>
))}
</ul>
);
};
export default NewsHook
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.