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

【问题标题】：How to use life cycle methods /functions in React Hook?如何在 React Hook 中使用生命周期方法/函数？
【发布时间】：2020-05-16 21:58:45
【问题描述】：

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

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

【问题讨论】：

hier 是原始的基于类的版本，带有生命周期方法
“它会引发错误”。请添加错误
好吧。我看到的错误之一是您将 news 设置为 setNews({news: result.data.hits}) 这是 news.news[] 但是当您映射主题时，您映射的是对象而不是对象数组。正确的地图是 news.news.map()
我无法发布只有 39 个字符的基于类的版本，因为太长而被拒绝
你遇到了什么错误？

标签： javascript reactjs react-hooks react-functional-component

【解决方案1】：

解决方案如下：

setNews(result.data.hits);

【讨论】：

【解决方案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>
  );
}

它会解决你的问题。希望对你有帮助:)

【讨论】：

谢谢大家。建议的更改不起作用。我仍然收到错误：TypeError: news.map is not a function
嗨，兄弟，请检查编辑后的答案。我测试了它，它应该可以工作

【解决方案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

【讨论】：