Question

在我的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

当我尝试运行时，出现空白页，并且没有错误。我的问题在哪里，我该如何解决？非常感谢您的帮助和时间

Answer 1

您将无法从then()的{{1}} / catch()中返回JSX。相反，您可以通过利用React.Component生命周期方法componentDidMount并使用auth.doVerfiyPasswordReset()来处理状态属性以进行条件渲染来解决这个问题。我已经向组件添加了状态属性，一个用于跟踪加载（API调用已完成），另一个用于跟踪该调用是成功（然后）还是失败（捕获）。这些属性用于有条件地生成JSX内容以进行渲染。假设setState()是在首次安装组件时运行的，而不是每次调用verfiyResetPassword()时都运行：

render()

这是基本的example。

此外，仅在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> ); } } }由诸如按钮this.verfiyResetPassword = this.verfiyResetPassword.bind(this);或类似按钮之类的DOM事件执行的情况下，才需要在构造函数verfiyResetPassword()中使用

。

希望有帮助！

Answer 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

React：条件渲染的问题

2 个答案: