使用redux时，React主要组件被调用两次

Posted 2021-05-05

我有一个react主要组件，它在componentDidMount上调度redux操作，该操作将获取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"));

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

在main-subcomponent中记录“runned1”

“已挂载”记录在componentDidMount中

“

答案

我相信你可以通过在componentDidmount中提供一些额外的逻辑来解决这个问题。您还应该使用组件state。

写下这样的东西：

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

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

这基本上说，如果您的组件已经安装了一次，那么您将不会提出您的操作创建者请求。

另一答案

如果你仔细观察你的console.log你可以注意到你的HMR Hot Module Reloading -plugin，重新安装你的组件，这是发生这种情况的主要原因。

这个插件的作用是，它会监视您的包代码更改以及每次保存重新呈现组件时。还有很多讨论，这个插件不能按预期工作。

如果您希望使用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

另一答案

当我从项目中删除webpack时，问题就解决了。但是，任何人都可以回答如何在仍然使用webpack时解决这个问题。