React：条件渲染的问题答案

【问题标题】：React: Issues with Conditional RenderingReact：条件渲染的问题
【发布时间】：2019-03-01 07:49:16
【问题描述】：

在我的 React-App 中，我使用 Firebase SDK。如果用户想要重置他的密码，他将被重定向到我的应用程序中的一个页面。如果代码有效，则组件<PWResetConfirmForm /> 应该被渲染。如果代码无效，则渲染组件<PWResetOutdatedForm />。

我的页面组件如下所示：

class PWResetConfirmPage extends Component {

    constructor(props) {
        super(props);
        this.state = {};
        this.verfiyResetPassword = this.verfiyResetPassword.bind(this);
    }

    verfiyResetPassword() {
        const params = (new URL(`http://dummy.com${this.props.location.search}`)).searchParams;
        const code = params.get("oobCode")

        auth.doVerfiyPasswordReset(code)
            .then(function () {
                return (
                    <div className="HomePage-Main">
                        <TopBar></TopBar>
                        <PWResetConfirmForm></PWResetConfirmForm>
                    </div>
                );
            })
            .catch(function () {
                return (
                    <div className="HomePage-Main">
                        <TopBar></TopBar>
                        <PWResetOutdatedForm></PWResetOutdatedForm>
                    </div>
                );
            })
    }

    render() {
        return (
            <div>
                {this.verfiyResetPassword()}
            </div>
        );
    }

}

export default PWResetConfirmPage

当我尝试运行时，我得到一个空白页而不是错误。我的问题在哪里，我该如何解决？非常感谢您的帮助和时间

【问题讨论】：

请记住，浏览器具有开发工具，可让您检查内部结构并查看请求和响应。
@jdv 感谢您的回答，但是在安装 React DEV 工具后，我找不到任何东西，这看起来像是一个错误...您对原因有其他想法吗？我的功能“verfiyResetPassword”是否正确？这个函数可以返回一些东西吗？
verfiyResetPassword() 可能不正确，您不能以这种方式在承诺中返回 JSX。在基本层面上，您最好在 then/catch 中设置一个布尔状态属性并根据该属性有条件地呈现。
@AlexanderStaroselsky 感谢您的回答...我是 React 初学者，您能告诉我，我该如何处理我的文件？非常感谢
当然可以，但是你什么时候在这个组件中执行verfiyResetPassword()？是在组件加载时吗？是点击某个按钮的时候吗？它是如何触发的？

标签： reactjs firebase

【解决方案1】：

您将无法像这样从 then()/catch() 或 auth.doVerfiyPasswordReset() 中返回 JSX。您可以通过利用 React.Component 生命周期方法 componentDidMount 并使用 setState() 来操作状态属性以进行条件渲染来解决此问题。我为组件添加了状态属性，一个用于跟踪是否加载（API 调用已完成），另一个用于跟踪调用是成功（然后）还是失败（捕获）。这些属性用于有条件地生成 JSX 内容以进行渲染。这是假设 verfiyResetPassword() 打算在组件首次挂载时运行，而不是每次调用 render() 时运行：

class App extends Component {
  constructor() {
    super(); 
    this.state = {
      isResetVerified: null,
      loading: true
    };
  }

  componentDidMount() {
    this.verfiyResetPassword();
  }

  verfiyResetPassword() {
    const params = (new URL(`http://dummy.com${this.props.location.search}`)).searchParams;
    const code = params.get("oobCode")

    auth.doVerfiyPasswordReset('foobar')
      .then(() => {
        this.setState({
          ...this.state,
          isResetVerified: true,
          loading: false
        });
      })
      .catch(() => {
        this.setState({
          ...this.state,
          isResetVerified: false,
          loading: false
        });
      })
  }

  getContent() {
    if (this.state.loading) {
      return (
        <div>Loading...</div>
      );
    } else {
      if (this.state.isResetVerified) {
        return (
          <div className="HomePage-Main">
            <TopBar></TopBar>
            <PWResetConfirmForm></PWResetConfirmForm>
          </div>
        );
      } else {
        return (
          <div className="HomePage-Main">
            <TopBar></TopBar>
            <PWResetOutdatedForm></PWResetOutdatedForm>
          </div>
        );
      }
    }
  }

这是一个基本的example 在行动。

此外，只有在 verfiyResetPassword() 由 DOM 事件（例如按钮 onClick 或类似事件）执行时，才需要在构造函数中使用 this.verfiyResetPassword = this.verfiyResetPassword.bind(this);。

希望对您有所帮助！

【讨论】：

感谢您的回答，但我仍然可以自己修复错误；）

【解决方案2】：

我仍然可以自己修复错误：

class PWResetConfirmPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isValid: false,
            code: "",
        };
        this.verfiyResetPassword = this.verfiyResetPassword.bind(this);
    }

    componentDidMount() {
        const params = (new URL(`http://dummy.com${this.props.location.search}`)).searchParams;
        const code = params.get("oobCode")
        this.setState({code:code})
        auth.doVerfiyPasswordReset(code)
      .then(() => {
        this.setState({
          ...this.state,
          isValid: true,
        });
      })
      .catch(() => {
        this.setState({
          ...this.state,
          isValid: false,
        });
      })
  }


    verfiyResetPassword() {
        if (this.state.isValid) {
            return (
                <div>
                    <TopBar></TopBar>
                    <PWResetConfirmForm code={this.state.code}></PWResetConfirmForm>
                </div>
            );
        } else {
            return (
                <div>
                    <TopBar></TopBar>
                    <PWResetOutdatedForm></PWResetOutdatedForm>
                </div>
            );
        }

    }

    render() {
        return (
            <div className="HomePage-Main">
                {this.verfiyResetPassword()}
            </div>
        );
    }

}

export default PWResetConfirmPage

【讨论】：