Javascript 使用redux时，会调用React主组件两次

我有一个react主组件，它在

componentDidMount

上调度redux操作，该操作将获取API数据

问题是：当我启动应用程序时，我的

组件didmount

和主组件会执行两次。因此，每次加载应用程序时，它都会进行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;

//减速器

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;
    }

}

//减根剂

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"));

从'redux'导入{createStore，applyMiddleware}；
从“/components/MapStateTops”导入MapStateTops；
从“/redux/reducers/rootReducer”导入rootReducer；
从'react redux'导入{Provider}；
从“redux thunk”导入thunk；
//常量initialState={}；
常量中间件=[thunk]；
const store=createStore（rootReducer、applyMiddleware（…中间件））；
render（，document.getElementById（“根”））；

发布控制台图像以供参考“渲染”记录在主组件中

“runned1”记录在主子组件中

“已安装”记录在componentDidMount内部

---

“

我相信您可以通过在

组件didmount

中提供一些附加逻辑来解决这个问题。您还应该使用组件

状态

这样写：

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

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

---

这本质上是说，如果您的组件已经挂载了一次，那么您将不会提出action creator请求。

我相信您可以通过在

组件挂载中提供一些附加逻辑来解决这个问题。您还应该使用组件的
状态

这样写：

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

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

这本质上是说，如果您的组件已经挂载过一次，那么您将不会提出action creator请求。
当我从项目中删除webpack时，问题已经解决。但是有人可以回答我如何在仍然使用webpack的情况下解决此问题。
当我从项目中删除webpack时，问题已经解决。但是有人可以回答吗回答如何在仍然使用网页包的情况下解决此问题。
如果您仔细观察
控制台。记录
，您会注意到您的HMR
热模块重新加载
-插件时，会重新装载您的组件，这是发生此情况的主要原因

这个插件的作用是，它会监视捆绑包代码的更改，并在每次保存组件时重新呈现组件。也有很多讨论认为这个插件并不能像预期的那样在所有情况下都工作

这里有一些材料，如果你想使用HMR。
关于HMR-

HMR用户指南-
如果仔细观察
控制台.log
，您会注意到HMR
热模块重新加载
-插件时，会重新装载组件，这是发生这种情况的主要原因

这个插件的作用是，它会监视捆绑包代码的更改，并在每次保存组件时重新呈现组件。也有很多讨论认为这个插件并不能像预期的那样在所有情况下都工作

这里有一些材料，如果你想使用HMR。
关于HMR-

HMR用户指南-
使用状态没有改变任何事情使用状态没有改变任何事情你找到解决方案了吗？我有同样的问题。你找到解决方案了吗？我有同样的问题。