如何在 React Hook 中使用生命周期方法/函数?

Question

以下组件有什么问题？ 它抛出了一个错误，而具有生命周期方法的原始基于类的版本工作正常吗？

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

Answer 1

解决方案如下：

setNews(result.data.hits);

Answer 2

问题是因为数据正在获取。所以新闻仍然是无效的。要么使用异步来解决问题，要么以这种方式:)

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

它将解决您的问题。 希望对:)有所帮助

Answer 3

你不需要设置挂载状态，因为当组件挂载时，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