在现有状态转换错误期间无法更新

Question

编辑：我解决了我的问题，它现在对我有用 - 还编辑了我的代码以反映新的变化。

我收到此错误，但我不确定此错误的原因。

因为是公司的材料所以无法展示代码，所以我会尽力描述它：

App.js：

`class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render () {
        return (
            <div>
                <Header />
                <RouteList />
                <Footer />
            </div>
        )
    }
}`

我的<RouteList /> 是一个无状态函数，它返回网络应用程序的所有路由。

Header.js：

class Header extends React.Component {
    constructor (props) {
        super(props);
        this.changeHeader = this.changeHeader.bind(this);
    }

    changeHeader(headerType) {
        this.props.actions.changeHeader(headerType)
    }

    GetHeader() {
        // if-else statement which will return a different sub header class
        const HeaderType = this.props.renderHeader.headerType
        if (headerType == 'abc') {
            <aHeader changeHeader={this.changeHeader} />
        } [...] {
            // Final else block return something
        }
    }

    render () {
        return (
            <div>{this.GetHeader()}</div>
        )
    }
}

function mapStateToProps(state, ownProps) {
    return { renderHeader: state.renderHeader};
}

function mapDispatchToProps(dispatch) {
    return { actions: bindActionCreators(headerActions, dispatch) };
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header));

this.props.action.changeHeader(headerType) 是一个 if-else 语句，根据 headerType 的值，将触发不同的操作。

state.renderHeader 在我的 rootReducer 中声明。

我将changerHeader() 传递给无状态的单个 header.js（即 aHeader.js、bHeader.js ...）。单击导航链接时，它将调用该方法并将页面路由到另一个 UI。这就是我将方法嵌入导航链接的方式：onClick={changeHeader(input')}。

rootReducer.js

const rootReducer = combineReducers({renderHeader});
export default rootReducer;

renderHeader就是renderHeaderReducer。

headerAction.js

export function changeHeader(headerType) {
    if (headerType == "abc") {
        return {type: type, headerType: "abc"}
    } [...] {
        // something default
    }
}

renderHeaderReducer.js

export default function renderHeaderReducer(state = initialState, action) {
switch(action.type) {
    case "abc":
        return (Object.assign({}, ...state, {headerType: action.headerType}));
    [...];
    default:
        return state;
}

}

此时单击链接时，Web 浏览器应刷新，将 Header 留在原处但修改部分。但是我的网站进入了一个无限循环，错误是：

错误：在现有状态转换期间无法更新（例如在渲染或其他组件的构造函数中）。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移动到 componentWillMount。

当我执行 console.log 以查看发生了什么时，它似乎正在循环我定义的所有各种选项，这些选项将呈现 Header.js

事实证明，主要问题是当我调用我的 onClick 方法时。导致我的代码出错的无限循环是 onClick 函数触发的结果，即使没有被点击。

原文：onClick={this.changeHeader('abc')} 新：onClick={() => changeHeader('abc')}

请参阅此post 以获得解释。

谢谢。

Answer 1

一些伪代码的时间:)

据我了解，您有一个 Header 组件，它连接到一个 rootReducer 组件，该组件包含您所在的路由器链接的标题。

我的应用程序中有一些类似的代码，我们使用单个组件调度操作来更新 rootReducer 标头。标头仅使用 redux 侦听更新并重新呈现自身。

class Header extends React.Component {
     // render the header 
     render() {...}
 }
 const mapStateToProps = (state) => {
     return {
        header: state.rootReducer.header
     }
 }
 export default withRouter(connect(mapStateToProps, {})(Header));

组件

 class MySpecialRouteComponent extends React.Component {
     componentDidMount() {
         this.props.changeHeader("Special Component")
     }
     render() {...}
 }
 const mapStateToProps = (state) => {
     return {
       ...whatever 
     }
 }
 export default withRouter(connect(mapStateToProps, {changeHeader})(MySpecialRouteComponent));

你不应该让 render 在 React 中执行 setState！

Answer 2

我将展示如何设置一切来处理这种情况。

redux/header-actions.js（从您的组件中调用这些动作创建者）：

export const changeHeader = (headerType) => {
    return {
        type: 'CHANGE_HEADER',
        payload: {
            headerType: headerType
        }
    }
}

redux/header-reducers.js（注意：这将在您调用操作时处理）：

const INITIAL_STATE = {
    headerType: 'header-a'
};

export default function(state = INITIAL_STATE, action) {
    switch (action.type) {
        case 'CHANGE_HEADER':
            return changeHeader(state, action.payload);
        default:
            return state;
    }
}

const changeHeader = (state, payload) => {
    // this is where your app will update the state, to indicate
    // which header should be displayed:
    return {
        ...state,
        headerType: payload.headerType
    }
}

redux/index.js：

import headerReducers from './reducers/header-reducers';
import { combineReducers } from 'redux';

const allReducers = combineReducers({
    header: headerReducers
});

export default allReducers;

现在您可以像这样设置 header.js 组件：

import { changeHeader } from '../redux/header-actions';

class Header extends Component {

    render() {
        return (
            <div>{this.renderHeader()}</div>
        );
    }

    renderHeader() {
        if (this.props.headerType === 'header-a')
            return <aHeader changeHeader={this.props.changeHeader} />
        else
            return <bHeader changeHeader={this.props.changeHeader} />;
    }

}

function mapStateToProps(store, ownProps) {
    return {
        headerType: store.header.headerType
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        changeHeader: changeHeader
    },
    dispatch);
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header));

然后在例如 aHeader.js 中：

class aHeader {

    constructor() {
        super();
        this.changeHeader = this.changeHeader.bind(this);
    }

    render() {
        return <div onClick={this.changeHeader}>header a</div>;
    }

    changeHeader() {
        this.props.changeHeader('header-b'); // call the action creator here
    }
}