Question

我遇到一个奇怪的问题，我读了一些答案和一些解决方案，但仍然无法解决我的问题，这就是我的问题，这是众所周知的，（我知道很多代码）：

Maximum update depth exceeded. This can happen when a component repeatedly 
calls setState inside componentWillUpdate or componentDidUpdate. React limits 
the number of nested updates to prevent infinite loops.

这是我的组件：

class Operations extends Component {
state = {
    data: [],
    mode: 1, // 1 desktop - 2 phone - 3 bigdesktop - 4 tablette
    contratSelected: 0
};

constructor(props) {
    super(props);
}

componentDidMount() {
    this.setState({ data: !isEmpty(this.props.operations) ? this.props.operations : "" });


// 
//         Many other methods here, but not needed to show the problem
// 

sortDateOperation = ({ order }) => {
    const data = partition(this.state.data, item => !item.isChild);

    for (let counter = 0; counter < data[0].length; counter += 1) {
        data[0][counter].chiffrage = this.dateToNumber(data[0][counter].dateOperation);
    }

    const result = orderBy(
        data[0],
        ["annee", "chiffrage"],
        ["desc", order === 1 ? "asc" : "desc"]
    );

    result.forEach((res, index) => {
        res.id = index;
    });

    // The Line causing error
    this.setState({ data: result });

    return result;
};

render() {
    return (
        <Fragment>
            <Title text={this.props.title || ""} color="primary" />
            {this.state.mode !== 2 && (
                <div className="co-table-data">
                    <div className="co-data-table">
                        <Grid container>
                            <Grid item xs={12} sm={12}>
                                <Datatable
                                    value={this.state.data}
                                    type="grey"
                                    autoLayout
                                    upperCaseHeader
                                    rowGroupHeaderTemplate={data => data.annee}
                                    rowGroupFooterTemplate={() => undefined}
                                    rowGroupMode="subheader"
                                    groupField="annee"
                                    className="co-operations-contrat"
                                >
                                    <Column
                                        header={intl.get("CONTRAT_DATE_DE_VALEUR")}
                                        field="dateOperation"
                                        sortable="custom"
                                        sortFunction={this.sortDateOperation}
                                        body={this.getDateContent}
                                    />
                                    <Column
                                        header={intl.get("CONTRAT_TYPE_MOUVEMENT")}
                                        field="typeMouvement"
                                        body={this.getTypeContent}
                                    />
                                    <Column
                                        header={`${intl.get("MONTANT")}(€)`}
                                        field="montantOperation"
                                        sortable="custom"
                                        sortFunction={this.sortMontanta}
                                        body={this.getMontantContent}
                                    />
                                </Datatable>
                            </Grid>
                            <Grid item xs={12} />
                        </Grid>
                    </div>
                </div>
            )}

            {this.state.mode === 2 && <MobileDatatable />}
        </Fragment>
    );
}
}

export default Operations;

因此，当我单击“列”是数据表时，我的日期会被排序，我需要更新状态（数据），但是我得到了这个错误，确切的是：

....
<Column
                                        header={intl.get("CONTRAT_DATE_DE_VALEUR")}
                                        field="dateOperation"
                                        sortable="custom"
                                        sortFunction={this.sortDateOperation}
                                        body={this.getDateContent}
                                    />

....

任何帮助将不胜感激。

Answer 1

问题在列组件的标题属性中

 header={intl.get("CONTRAT_DATE_DE_VALEUR")}

应该是这个

header={() => {intl.get("CONTRAT_DATE_DE_VALEUR")}}

您不能直接在组件内部执行函数react会自动为您调用

因此，将所有三个Column组件的header属性都更改为此

header={() => {intl.get("CONTRAT_DATE_DE_VALEUR")}}

 header={() => {intl.get("CONTRAT_TYPE_MOUVEMENT")}}

header={() => {`${intl.get("MONTANT")}(€)`}}

我的setState方法多次调用会导致问题吗？

1 个答案: