Question

我正在尝试创建一个动态表单组件，而我的Auth组件的状态如下：

  state = {
    signUpMode: true,
    formComponents: {
      email: {
        elements: {
          elementType: "input",
          label: "E-mail",
        },
        configs: {
          type: "email",
          placeholder: "E-mail",
          value: "",
          name: "email",
        },
        validation: {
          required: true,
        },
        isValid: false,
        error: "",
      },
      password: {
        elements: {
          elementType: "input",
          label: "Password",
        },
        configs: {
          type: "password",
          placeholder: "Password",
          value: "",
          name: "password",
        },
        validation: {
          required: true,
        },
        isValid: false,
        error: "",
      },
      submit: {
        elements: {
          elementType: "input",
        },
        configs: {
          type: "submit",
          value: "Sign Up",
          name: "signup",
        },
      },
    },
  };

formComponents保存每个输入的所有配置，它的外观应如何，我将它们作为道具传递给我的Form组件

 render() {
    return (
      <div className="auth">
        <Form submitHandler={this.props.Auth} signUp={this.state.signUpMode} formInputs={this.state.formComponents}></Form>
        <button className="switch-auth-mode" onClick={this.switchAuthMode}>
          Switch to {this.state.signUpMode ? "Sign In" : "Sign Up"}
        </button>
      </div>
    );
  }

一切正常，除了您可以看到我拥有此按钮以更改为注册模式或登录模式之外，该按钮将formComponents内部的Submit元素的值更改为“注册”或“登录”

<button className="switch-auth-mode" onClick={this.switchAuthMode}>

switchAuthMode更改signUpMode，而回调应更改提交的文本，并且确实如此

switchAuthMode = () => {
    this.setState((prevstate) => {
      return {
        signUpMode: !prevstate.signUpMode,
      };
    }, this.switchButton);
  };

我正在使用lodash clonedeep来克隆formComponents

switchButton = () => {
    let formComponents = cloneDeep(this.state.formComponents);

    if (this.state.signUpMode) {
      formComponents.submit.configs.value = "Sign Up";
    } else {
      formComponents.submit.configs.value = "Sign In";
    }
    this.setState({ formComponents });
  };

当我更改Submit元素中的Sign Up或Sign In值时，问题出在我的表单组件上，它没有变化，它保持了初始值，它正确接收了props，但状态内部没有变化，换句话说，状态为什么没有更新？

我都试图像这样在componentDidMount()中设置状态：

state = {
    formInputs: {},
  };
  componentDidMount() {
    this.setState({ formInputs: this.props.formInputs }, () => {
      console.log(this.state);
    });
  }

或直接这样：

state = {
    formInputs: {...this.props.formInputs},
  };

但是没有一个工作，我在做什么错了？

正如Zimri Leijen所建议的那样

componentDidUpdate(prevProps) { if (this.props.signUp !== prevProps.signUp) { this.setState({ formInputs: this.props.formInputs }); } }

现在的问题是第一次单击时不会更新，但是在第二次单击是时，它显示错误，应该进行注册时显示登录，而相反则显示

Answer 1

该组件不会在每次更改道具时重新安装。因此componentDidMount()不会触发，您的状态也不会更新。

您需要其他生命周期方法

在这种情况下，componentDidUpdate()很合适。

当传递的prop更改时，为什么子组件中依赖prop的状态没有更新？

1 个答案: