不變違反：最大更新深度..當組件重復調用componentWillUpdate或componentDidUpdate內部的setState時

Question

我正在設置基於用戶的身份驗證，以僅允許某些用戶使用導航欄的不同組件和不同部分。

僅當我兩次單擊導航欄中的“創建模板”選項卡時，才會顯示此錯誤。 我不確定發生了什么。

App.jsx

const TemplateAssignment = AuthorizedComponent(new Set(['admin', 'manage']));
const TemplateCreation = AuthorizedComponent(new Set(['admin']));
const TemplateModification = AuthorizedComponent(new Set(['admin', 'manage']));

export class App extends Component {
    componentDidMount() {
        this.props.getUser();
    }

    render() {
        console.log("THIS.PROPS.USEROLES IN APP: ", this.props)
        return this.props.authenticated ? (
            <Template title="Bulk Attribute Tool 2.0">
                <NavBar userRoles={this.props.userRoles} />
                {/* <ErrorBoundary> */}
                {/* <Router>
                    <Route path="/" component={TemplateAssignment(AgentTemplateAssignFlow)}>
                        <Route path="/create-new-template" component={TemplateCreation(CreateTemplateFlow)} />
                        <Route path="/modify-template" component={TemplateModification(ModifyTemplatePage)} />

                    </Route>
                </Router> */}
                {/* <Route exact path="/" component={TemplateAssignment(AgentTemplateAssignFlow)} />
                <Route path="/create-new-template" component={TemplateCreation(CreateTemplateFlow)} />
                <Route path="/modify-template" component={TemplateModification(ModifyTemplateFlow)} /> */}

                {/* </ErrorBoundary> */}

                {/* <div>
                    {this.props.retrieved &&
                        (this.props.authorized === true ? (
                            <div className="flex-container">
                                <NavBar userRoles={this.props.userRoles} />
                                <AgentTemplateAssignFlow />
                                <CreateTemplateFlow />
                            </div>
                        ) : (
                            <UserMessage className="alert" messageText={NOT_AUTHORIZED} messageType={SERVICE_ERR} />
                        ))}
                </div> */}

                <Route path="/" exact component={TemplateAssignment(Home)} />
                <Route path="/create-new-template" component={TemplateCreation(CreateNewTemplatePage)} />
                <Route path="/page2" component={TemplateModification(Page2)} />
            </Template>
        ) : (
            <Template title="TOOL">
                <UserMessage
                    className="alert"
                    messageText={this.props.statusMessage.messageText}
                    messageType={this.props.statusMessage.messageType}
                />
            </Template>
        );
    }
}

導航欄：

import React from 'react';
import './navbar.css';
import {Link} from 'react-router-dom';
import PropTypes from 'prop-types';

const userRole = userRoleProp => {
    let userAuthorized = false;
    if (userRoleProp.has('admin')) {
        userAuthorized = true;
    }
    return userAuthorized;
};

export const NavBar = props => {
    // console.log("PROPS IN NAVBAR: ", props)
    return (
        <nav className="navbar">
            <ul className="navBarList">
                <li className="navBarItem">
                    <Link to="/">Template Assignment</Link>
                </li>
                {userRole(props.userRoles) && (
                    <li className="navBarItem">
                        <Link to="/create-new-template">Create Templates</Link>
                    </li>
                )}
                {userRole(props.userRoles) && (
                    <li className="navBarItem">
                        <Link to="/page2">Modify Templates</Link>
                    </li>
                )}

            </ul>
        </nav>
    );
};

NavBar.propTypes = {
    userRoles: PropTypes.object
};

CreateNewTemplatePage：

export class CreateNewTemplatePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalIsActive: false,
            currentData: [],
            limit: 1
        };
        this.onSubmit = this.onSubmit.bind(this);
        this.onUpdate = this.onUpdate.bind(this);
        this.retryDepartment = this.retryDepartment.bind(this);
    }

    componentDidMount() {
        this.props.getCosaData();
        this.props.getSupplierData();
        this.props.getAllTemplateData();
    }

    componentWillUnmount() {
        this.props.clearMessage();
        this.hideModal();
    }

    showModal = modalIsActive => {
        this.setState({modalIsActive: true});
    };

    hideModal = modalIsActive => {
        this.setState({modalIsActive: false});
    };

    resetTemplate = () => {
        this.props.reset('templateForm');
        this.hideModal();
    };

    onSubmit() {
        this.props.history.push('/create-new-template-attributes');
    }

    onUpdate(event, value) {
        if (value) {
            this.setState({cosa: value});
            this.props.getDepartmentData(value);
        }
    }

    retryDepartment() {
        let value = this.state.cosa;
        if (value) {
            this.props.getDepartmentData(value);
            this.props.clearMessage();
        }
    }

    checkForRequestFailure() {
        let requestFailure = false;
        if (
            this.props.statusMessage.callsWithError.cosaRequestFailure ||
            this.props.statusMessage.callsWithError.supplierRequestFailure ||
            this.props.statusMessage.callsWithError.allTemplateRequestFailure
        ) {
            requestFailure = true;
        }

        return requestFailure;
    }

    render() {
        let {handleSubmit} = this.props;
        return (
            <div>
                {/* {this.props.userRoles.has('admin') ? ( */}
                    <div>
                        {this.checkForRequestFailure() ? (
                            <UserMessage
                                className="alert"
                                messageText={this.props.statusMessage.userMessage}
                                messageType={this.props.statusMessage.messageType}
                            />
                        ) : (
                            <div>
                                <header className="page-header">Create a New Template</header>
                                <UForm className="on-submit" onSubmit={handleSubmit(this.onSubmit)}>
                                    <FormSection label="Name/Description">
                                        <FormGroup>
                                            <Field
                                                className="usaa-input"
                                                component={Textarea}
                                                label="Template Name"
                                                name="name"
                                                maxLength={128}
                                                minRows={1}
                                                validate={[required, templateValidator]}
                                            />
                                            <Field
                                                component={Textarea}
                                                name="description"
                                                helpText="Please be descriptive."
                                                label="Template Description"
                                                maxLength={1024}
                                                minRows={1}
                                                validate={required}
                                            />
                                        </FormGroup>
                                    </FormSection>
                                    <FormSection label="COSA/Department">
                                        <FormGroup>
                                            {this.props.statusMessage.callsWithError.deptRequestFailure && (
                                                <UserMessage
                                                    className="alert"
                                                    messageText={this.props.statusMessage.userMessage}
                                                    messageType={this.props.statusMessage.messageType}
                                                />
                                            )}
                                            <Field
                                                className="cosa-input"
                                                component={Select}
                                                name="cosa"
                                                label="COSA"
                                                helpText="Please select a COSA"
                                                options={checkBoxFilter(this.props.cosaData)}
                                                validate={required}
                                                onChange={this.onUpdate}
                                            />
                                        </FormGroup>
                                        {this.props.statusMessage.callsWithError.deptRequestFailure && (
                                            <Button
                                                buttonname="try-again-button"
                                                label={
                                                    <p>
                                                        <span>Try Again </span>
                                                        <Icon name="cycle" size="lg" />
                                                    </p>
                                                }
                                                onClickMethod={this.retryDepartment}
                                            />
                                        )}
                                        <FormGroup>
                                            {this.props.departmentData.length > 0 && (
                                                <Field
                                                    component={CheckboxGroup}
                                                    name="department"
                                                    choices={checkBoxFilterDept(this.props.departmentData)}
                                                    label="Department"
                                                    maxCount={3}
                                                    validate={[required, departmentvalidator]}
                                                />
                                            )}
                                        </FormGroup>
                                    </FormSection>
                                    <FormSection label="Suppliers">
                                        <FormGroup>
                                            {this.props.supplierData.length > 0 && (
                                                <Field
                                                    component={CheckboxGroup}
                                                    name="suppliers"
                                                    choices={checkBoxFilter(this.props.supplierData)}
                                                    label="Suppliers"
                                                    helpText="Please select Suppliers"
                                                    validate={required}
                                                />
                                            )}
                                        </FormGroup>
                                    </FormSection>
                                    <ButtonContainer
                                        primaryAction={<SubmitButton allProps={this.props} proceedLabel="Next" />}
                                        secondaryActions={
                                            <Button
                                                type="button"
                                                buttonname="clear-all-button-form"
                                                label="Clear All"
                                                onClickMethod={this.showModal}
                                                disabled={!this.props.templateFormData}
                                            />
                                        }
                                    />
                                    <Modal
                                        active={this.state.modalIsActive}
                                        headerTitle="Are you sure you wish to remove all attributes?"
                                        onClose={this.hideModal}
                                        className="clear-all-modal"
                                    >
                                        <div className="clear-all-modal-content">
                                            <Button
                                                type="clearAll"
                                                buttonname="clear-template-form"
                                                label="Yes"
                                                onClickMethod={this.resetTemplate}
                                            />
                                            <Button
                                                type="cancel"
                                                buttonname="cancel-clear-form"
                                                label="No"
                                                onClickMethod={this.hideModal}
                                            />
                                        </div>
                                    </Modal>
                                </UForm>
                            </div>
                        )}
                    </div>

            </div>
        );
    }
}

每當顯示導航欄中的不同選項卡時，均預期不會顯示錯誤。

Answer 1

不知道這是否是導致錯誤的確切原因，但是您正在調用this.hideModal() ，它在componentWillUnmount()內部設置狀態。 您無需在此處重置狀態，因為該組件將被卸載並且該狀態將始終重置。

刪除調用setState不必要功能可能會解決您的問題。