我的 console.log() 在我的 chrome 控制台中顯示了兩次

Question

當我在我的 class 基本Component的渲染方法中放置一個console.log()時，我的 console.log( console.log()在我的chrome控制台中顯示了兩次，但在我的firefox控制台中沒有這個問題

我的組件：

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchPosts } from "../actions";

export class PostList extends Component {
  componentDidMount() {
    this.props.fetchPosts();
  }

  render() {
    console.log(this.props.posts);
    return (
      <div>
        <h1>Post List</h1>
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  posts: state.posts,
});

export default connect(mapStateToProps, { fetchPosts })(PostList);

Answer 1

當某些事情發生變化時，組件會重新渲染。

fetchPosts方法可能會觸發重新渲染。

Answer 2

這可能是因為 react 現在將您的應用程序包裝在<React.StrictMode>中，嚴格模式與具有 react 開發工具的瀏覽器相結合將開始多次調用組件以進行調試。 這不會在生產版本中發生。