reactjs

Question

我有这个请求处于反应状态。两者的目的几乎相同。我在考虑分页，但这个问题却让我感到困惑。关于分别加载两个请求

  // use effect loading hooks api responses
  useEffect(() => {
    const loadNews = async () => {
        try {
            const response = await api.get('science.json');

            const { results } = response.data;
           console.log(results);
           setScience(results);
          } catch (err) {
            // Handle Error Here
            console.error(err);
         }
         };

        loadNews();
     }, []);

  useEffect(() => {
    const loadNews = async () => {
        try {
            const response = await api.get('arts.json');

            const { results } = response.data;
           console.log(results);
           setTechnologies(results);
          } catch (err) {
            // Handle Error Here
            console.error(err);
         }
         };

        loadNews();
     }, []);

两者都是出于同样的目的，有没有关于两次不相同的代码的解决方案？

Answer 1

我倾向于将获取过程（获取结果）放入它自己的异步函数中。然后，您将使用该函数在 useEffect 中设置结果。

像这样：

async function fetchNews(jsonFile) {
    const response = await api.get(jsonFile);
    const { results } = response.data;
    return results;
}

useEffect(() => {
   fetchNews("science.json")
     .then(res => setScience(res))
     .catch(err => console.error(err))

   fetchNews("arts.json")
     .then(res => setTechnologies(res))
     .catch(err => console.error(err))
}, []);

Answer 2

这可能是

useEffect(() => {
  loadNews("arts.json", setScience);
  loadNews("science.json", setTechnologies);
}, []);

const loadNews = async (url, callBack) => {
  try {
    const response = await api.get(url);
    const { results } = response.data;
    console.log(results);
    callBack(results);
  } catch (err) {
    // Handle Error Here
    console.error(err);
  }
}

reactjs - axios - 请求如何改进

reactjs - axios - request how to improve

react-native

axios

react-hooks

use-state