超过了最大调用堆栈大小react

Question

import React,{ Component } from 'react';
import { connect } from 'react-redux';
import { itemid } from '../actions/action';


class DetailPage extends Component{
    componentWillUpdate(){
    this.props.dispatch(itemid([this.props.params.item,`${this.props.params.item}${this.props.params.id}`]))
    }
    render(){
        const { dispatch } = this.props;
        return(
                <div>
                    {this.props.params.id}
                </div>
            )
    }
}
function selectstate(state){
    return{
        state
    }
}
export default connect(selectstate)(DetailPage)

//{this.props.params.item}来自反应路由器（路径（'/detail/item/id'））

为什么我的调度是无限循环，直到出错（超过最大调用堆栈大小）

Answer 1

您正在对< code>componentWillUpdate进行调度。所以每次你更新状态，你都是在更新状态。永远不要修改componentWillUpdate:https://Facebook . github . io/react/docs/component-specs . html # updating-componentWillUpdate中的状态

顺便说一下，在< code > componentWillReceiveProps 中这样做可能会做同样的事情，因为您的状态(来自redux存储)将作为< code>props进入。

问题是为什么更新后还要做派单？是因为下面的功能设置状态吗？

如果您希望在设置特定状态后进行调度，那么您可以使用< code > shouldcomponentdupdate 来阻止除该状态之外的更新。但这感觉像是这种配置的副作用。我认为最好在设置状态的同时调度事件，或者作为状态的回调。