Реактивный основной компонент вызывается дважды при использовании приставки

Question

У меня есть главный компонент реагирования, который отправляет избыточное действие на componentDidMount, действие будет извлекать данные API.

Проблема в том, что при запуске приложения мой componentDidMount и основной компонент выполняются дважды. Таким образом, каждый раз при загрузке приложения выполняется 2 вызова API. В API есть ограничение на общее количество звонков, которые я делаю, но я не хочу достигать своего лимита.

Я уже пытался исправить проблему, удалив конструктор, используя componentWillMount проблема не решена.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../redux/actions/fetchActions';
import TableHeader from './tableHeader';

class Main extends Component {

    componentDidMount() {
        console.log("mounted");

        // this.props.dispatch(actions.fetchall("market_cap"));
    }
    render() {
        console.log("rendered");
        //  console.log(this.props.cdata);
        //  console.log(this.props.cdata.data.data_available);

        return <div className="">
            <TableHeader {...this.props} />
        </div>
    }
}

export default Main;

/// действия

    import axios from 'axios';

export function fetchall(sort) {
    return function (dispatch) {
        axios.get(`https://cors-anywhere.herokuapp.com/https:-----------`)
            .then(function (response) {
                dispatch({
                    type: 'FETCH_DATA',
                    payload: response.data
                })
            })
            .catch(function (error) {
                console.log(error);
            })
    }
}

// редуктор

let initialState = {
    coins: [],
    data_available: false,

};

export default function (state = initialState, action) {
    switch (action.type) {
        case 'FETCH_DATA':
            return {
                ...state,
                coins: action.payload,
                data_available: true

            }
        default: return state;
    }

}

// rootreducer

import { combineReducers } from 'redux';
import DataReducer from './dataReducer';

export default combineReducers({
    data: DataReducer
});

//// индекс

import {createStore, applyMiddleware} from 'redux';
import MapStateToProps from './components/mapStateToProps';
import rootReducer from './redux/reducers/rootReducer';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk';
//const initialState = {};
const middleware = [thunk];

const store = createStore(rootReducer, applyMiddleware(...middleware));

ReactDOM.render(<Provider store={store}><MapStateToProps/></Provider>, document.getElementById("root"));

консольное изображение размещено для справки, «отрендерено» зарегистрировано внутри основного компонента

"runned1" регистрируется внутри основного подкомпонента

«смонтированный», зарегистрированный внутри componentDidMount

"

Answer 1

Проблема решена, когда я удалил вебпак из проекта. Но кто-нибудь может ответить, как я могу решить эту проблему, все еще используя веб-пакет.

Answer 2

Если вы внимательно наблюдаете за console.log, вы можете заметить, что ваш плагин HMR Hot Module Reloading перемонтирует ваш компонент, и это является основной причиной этого события.

Что делает этот плагин, так это то, что он отслеживает изменения кода ваших пакетов и при каждом сохранении повторно отображает ваш компонент. Также было много дискуссий о том, что этот плагин не работает во всех случаях, как ожидалось.

Вот некоторые материалы, которые вы могли бы рассмотреть, если хотите использовать HMR.

Написание о HMR - https://codeburst.io/react-hot-loader-considered-harmful-321fe3b6ca74

Руководство пользователя для HMR - https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96

Answer 3

Я полагаю, что вы можете обойти это, предоставив некоторую дополнительную логику в componentDidmount. Вы также должны использовать свой компонент state.

Напишите что-то вроде этого:

constructor(props){
    super(props)
    this.state = {
        mounted: false
    }
}

componentDidMount(){
    if(!this.state.mounted){
        this.props.dispatchmyAction()
        this.setState({
            mounted: true
        })
    }
}

По сути, это говорит о том, что, если ваш компонент уже смонтирован один раз, вы не сделаете запрос создателя действия.