여러 번 마운트된 반응 및 반응 라우터 비동기 구성 요소(구성 요소DidMount를 여러 번 호출함)

여러 번 마운트된 반응 및 반응 라우터 비동기 구성 요소(구성 요소DidMount를 여러 번 호출함)

나는 웹팩 3.7.1과 리액션 15.6.1을 사용하고 있으며, 다른 구성 요소를 동적으로 로딩하고 있다.

내가 한 일

• AsyncComponent 및 가져오기()를 사용하여 청크를 생성하고 비동기식으로 구성 요소 로드
• 청크가 생성되도록 webpack.config 파일을 올바르게 구성(코드 분할)

이슈

• 구성부품을 여러 번 다시 렌더링(장착)한다.콘솔에서 모든 구성 요소의 구성 요소DidMount()에 무언가를 기록하면 콘솔에 2회 이상 표시됨!전에는 그렇게 하지 않았다: 내가 부품을 정상적으로 수입하고 있었을 때...

비동기 구성 요소로 변경하기 전의 동작

• 구성 요소가 올바르게 장착되었고 한 번만 장착됨...

내 Webpack.config 파일

module.exports = {
  devServer: {
    historyApiFallback: true
  },
  entry: {
    app:"./src/index.js",
    vendor: [
      "axios",
      "react",
      "react-dom",
      "react-redux",
      "react-router",
      "react-router-dom",
      "redux"
    ]
  },
  output: {
    path: __dirname + '/public/views',
    filename: '[name].js',
    chunkFilename: '[chunkhash].chunk.js',
    publicPath: "/views/"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: [/node_modules/, /pdfmake.js$/]
      },
      {
        test: /\.json$/,
        loader: "json-loader"
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: Infinity
    }),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
      filename:  __dirname + "/views/index.ejs",
      template: __dirname + "/views/template.ejs",
      inject: 'body',
      chunks: ['vendor', 'app'],
      chunksSortMode: 'manual'
    }),
    new PreloadWebpackPlugin({
      rel: "preload",
      include: ["vendor", "app"]
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
  ]
};

내 AppContainer.js 파일

 /**
 * General container of the website
 */
class AppContainer extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log("MOUNTING APP CONTAINER")
  }



  render() {
    const HomePage = AsyncComponent(() =>
      import(/* webpackChunkName:"HomePage"  */ "../components/homepage/homepage")
    );


    return (
      <div>
        <Switch>
          <Route exact path="/" component={HomePage} />
        </Switch>
      </div>
    );
  }
}

구성요소 자체는 더 복잡하지만(API 호출을 수행하고 경로가 더 많음) 스택 목적을 위해 여기서는 단순화됨;)

내 AsyncComponent.js 파일

import React, { Component } from "react";

export default function asyncComponent(importComponent) {
    class AsyncComponent extends Component {
      constructor(props) {
        super(props);

        this.state = {
          component: null
        };
      }

      async componentDidMount() {
        const { default: component } = await importComponent();

        this.setState({
          component: component
        });
      }

      render() {
        const C = this.state.component;

        return C ? <C {...this.props} /> : null;
      }
    }

    return AsyncComponent;
  }

비동기 COomponents를 사용하고 코드를 청크로 분할하기 전에 이 문제가 발생하지 않았기 때문에 비동기 구성 요소/청크 세대로부터 문제가 발생한 것 같아...하지만 난 그게 정확히 어디서 오는 건지 모르겠어

도와줘서 정말 고마워.

의 선언문을 옮겨 보십시오.HomePage의 밖에render.render임의의 횟수로 불릴 수 있으며, 반환되는 각 구성 요소는 Reaction과 다르게 보일 것이다.

/**
* General container of the website
*/
const HomePage = AsyncComponent(() =>
  import(/* webpackChunkName:"HomePage"  */ "../components/homepage/homepage")
);

class AppContainer extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log("MOUNTING APP CONTAINER")
  }

  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={HomePage} />
        </Switch>
      </div>
    );
  }
}

일반적으로 React 구성 요소 내에서 비동기 작업을 수행하지 말 것을 권고한다.UI에 대해 예측 가능한 수명 주기를 가지려면 렌더링 계층이 동기화되어야 한다.

참조URL: https://stackoverflow.com/questions/48346387/react-react-router-async-components-mounted-multiple-times-componentdidmount