Question

我整体上使用MERN堆栈，但我认为这个问题仅适用于react和redux形式。

每当我在我的用户信息中心中添加一个表单来添加项目时，我最终会得到 Uncaught Error: 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.

首先，我根本没有明确地调用componentWillUpdate或componentDidUpdate，因此我无法找到问题。如果我停止开发服务器，说CTRL+C它有时会为我呈现（现在无法使用）表单。

我试过（都失败了）：

只包含没有处理程序的表单
包含表单并在仪表板上处理
包含表单并在表单上处理
根据此somewhat similar problem

bind(this)

我有类似的redux-forms（在他们的容器中处理），适用于注册和登录

UserDashboard.js ，当我添加表单时发生错误并在没有它的情况下正常工作

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import * as actions from '../../actions';
import Cupcakes from './cupcakes';
import Monkeys from './monkeys';
import AddMonkeyForm from './add_monkey_form'


class UserDashboard extends Component {


    // handleSubmit({name}) {
    //     console.log("handleSubmitMonkey with", {name})
    //   //this.props.createMonkey({user, name})
    // }

    render() {
        return (
            <div className="container">
                <div className="section">
                    <h1>Hi: {this.props.user.name}</h1>
                </div>
                <div className="section">
                    <h2>Monkeys</h2>
                    <div className="row">
                        <div className="col m6 s12">
                        <h4>Add a new monkey</h4>
                        <AddMonkeyForm /> // If I take this out, everything works, it fails whether or not I add a handle submit function
                        </div>
                        <div className="col m6 s12">Existing monkeys</div>
                    </div>
                </div>
                <div className="section">
                    <h2>Cupcakes</h2>
                    <div className="row">
                        <div className="col m6 s12">Add a new cupcake</div>
                        <div className="col m6 s12">Existing cupcakes</div>
                    </div>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    const user = state.auth.user;
    const cupcakes = state.userdata.cupcakes;
    const monkeys = state.userdata.monkeys;
    return { user: user, monkeys: monkeys, cupcakes: cupcakes };
}

export default connect(mapStateToProps, actions)(UserDashboard);

// <AddMonkeyForm onSubmit={this.handleSubmit.bind(this)}/>

导致错误的

AddMonkeyForm.js - 无论我是尝试在AddMonkeyForm中调用handleubmit还是在UserDashboard中调用handleubmit，都会失败。

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';

import renderTextField from '../helpers/form_helpers';
import { createMonkey } from '../../actions';

class AddMonkeyForm extends Component {
    onSubmit(values) {
        console.log('trying to submit MONKEY');
        // this.props.createMonkey(values, () =>{
        //     this.props.history.push('/');
        // });
    }
    render() {
        const { handleSubmit } = this.props;

        return (
            <div className="section">
                <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                    <Field
                        label="Name"
                        name="name"
                        placeholder="Fluffy"
                        component={renderTextField}
                        type="text"
                    />

                    <button
                        className="btn-large dark-primary-color"
                        type="submit"
                    >
                        Add Monkey
                        <i className="material-icons right">done</i>
                    </button>
                </form>
            </div>
        );
    }
}

const validate = values => {
    const errors = {};

    if (!values.name) {
        errors.name = 'Please enter monkey name';
    }

    return errors;
};

export default reduxForm({
    form: 'addmonkey',
    validate
})(AddMonkeyForm);

//})(connect(null, { createMonkey })(AddMonkeyForm));

我将最终使用此

调用的actions.js中的操作

export function createMonkey(userid, name) {
    return function(dispatch) {
        const url = `${USER_API_URL}/${userid}/monkey/new`;
        const request = axios.post(url, {
            headers: { authorization: `Bearer ${localStorage.getItem('token')}` },
            name
        });
        request
            .then(response => {
                console.log("createMonkey has RESPONSE", response.data.createdMonkey)
                dispatch({
                    type: GET_USER_MONKEYS,
                    payload: response.data.createdMonkey
                });
            })
            // If request is bad...
            // -Show an error to the user
            .catch(() => {
                console.log('error');
            });
    };
}

** usergetters.js reducer，它最终会根据表单更新userdata.monkeys状态。

import { GET_USER_CUPCAKES, GET_USER_MONKEYS } from '../actions/types'

const initialUserData = [{cupcakes: [], monkeys: []}]

export default function userGetterReducer(state = initialUserData, action) {
  switch (action.type) {
    case GET_USER_CUPCAKES:
      return {...state, cupcakes: action.payload}
    case GET_USER_MONKEYS:
      return {...state, monkeys: action.payload }
    default:
      return state
  }
}

该项目在github上。这个特殊的错误分支是addmonkeyform1，如果由于某种原因你最终在主服务器上，它将看起来与此处显示的不同。 Go to Project on Github

Answer 1

我将项目拉下来，并试图找到多个来电的来源。我不知道它来自哪里。如果我发现更进一步，我会更新。

同时您可以在App.js中执行以下操作：

shouldComponentUpdate(nextProps, nextState) {
  console.log('shouldComponentUpdate');
  return nextState !== this.state;
}

如果状态没有改变，这将阻止重新渲染。

Answer 2

您在渲染表单时立即调用handleSubmit（...）。我假设您只想在实际提交表单时调用它，因此您应该更改此行：

<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>

这样的事情：

<form onSubmit={(values) => methodYouWantToCallWhenTheFormIsSubmitted(values)}>

如何在不启动过多调用的情况下插入reduxForm组件

2 个答案: