Question

我正在使用自己的MERN应用，当我在NewsPage组件中记录smth时，它会无限记录。

NewsPage组件：

const NewsPage = ({news, fetchNews}) => {
  const postNews = (title, body) => {
    axios.post("http://localhost:9000/news", { title, body });
  }

  useEffect(() => {
    fetchNews();

  }, [fetchNews, postNews])

  return (
    <>
      <AddNewsForm postNews={postNews}/>
      <h1>News:</h1>
      <NewsItemPage news={news} />
    </>
  );
};

const mapStateToProps = state => ({
  news: state.news
})

export default connect(mapStateToProps, {fetchNews})(NewsPage);

获取新闻操作：

export const fetchNews = () => dispatch => {
  fetchRequest();

  try {
    const fetch = async () => {
      const res = await axios.get("http://localhost:9000/news");

      dispatch({
        type: a.FETCH_NEWS_SUCCESS,
        payload: res.data
      });
    }
    fetch()
  } catch (e) {
    dispatch({
      type: a.FETCH_NEWS_FAILURE,
      error: e
    });
  }
}

它可以正常工作，我可以从中获取新闻并将新闻发布到后端，但是如果我在控制台中记录任何内容，它将无限记录，并且我不会收到任何错误。

有没有办法解决这个问题，这是一个真正的问题吗？

Answer 1

可能是因为render中使用了控制台日志所位于的任何功能，而该功能本身就是一个循环。否则，我没有其他办法可以知道为什么会重复。除非您正在执行的代码变慢，否则可能最终不会成为问题，这将来可能会导致性能问题。

Answer 2

您正在跟踪fetchNews数组中的postNews和useEffect，这将在每个渲染器上重新运行fetchNews();。

除非第二个参数useEffect中的值是基元，否则您需要使用一些深层比较方法：https://stackoverflow.com/a/54096391/4468021

Answer 3

实际上，您使用了错误的useEffect。

每次组件收到新道具时都会调用效果，因此，它看起来像这样：

1）组件安装，从useEffect调用函数
2）进行API调用，更新存储中的数据
3）数据传递到容器，更新“哑巴”组件
4）Dumb组件进行重新渲染，并从useEffect调用func，这就是无限循环。

实际上，您没有内存泄漏是很奇怪的。
您可以做的是：

1）添加一些条件渲染。我很确定，您只需要在初始加载时调用它即可。
2）添加类似ImmutableJS的东西，它不会重新渲染组件，并且如果没有任何变化也不会改变存储空间

React.js组件中的无限控制台日志记录

3 个答案: