Reactjs 反应：条件渲染的问题

在我的React应用程序中，我使用Firebase SDK。如果用户想要重置密码，他将被重定向到我的应用程序中的某个页面。如果代码有效，则应渲染组件

。如果代码无效，将呈现组件

我的页面组件如下所示：

类pwretconfirmpage扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
this.verfiyResetPassword=this.verfiyResetPassword.bind（this）；
}
verfiyResetPassword（）{
常量参数=（新URL）(`http://dummy.com${this.props.location.search}`）.searchParams；
常量代码=params.get（“oobCode”）
验证doVerfiyPasswordReset（代码）
.然后（函数（）{
返回(
);
})
.catch（函数（）{
返回(
);
})
}
render（）{
返回(
{this.verfiyResetPassword（）}
);
}
}
导出默认PWResetConfirmPage

当我尝试运行时，我得到一个空白页，没有错误。 我的问题在哪里？如何解决？

---

非常感谢您的帮助和宝贵时间

您将无法从

auth.doVerfiyPasswordReset（）

的

then（）

/

catch（）

中返回JSX。相反，您可以利用React.Component lifecycle方法并使用

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>
        );
      }
    }
  }

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
isResetVerified:空，
加载：正确
};
}
componentDidMount（）{
此.verfiyResetPassword（）；
}
verfiyResetPassword（）{
常量参数=（新URL）(`http://dummy.com${this.props.location.search}`）.searchParams；
常量代码=params.get（“oobCode”）
身份验证doVerfiyPasswordReset（'foobar'）
.然后（（）=>{
这是我的国家({
…这个州，
是否已验证：正确，
加载：错误
});
})
.catch（（）=>{
这是我的国家({
…这个州，
isResetVerified:错误，
加载：错误
});
})
}
getContent（）{
if（this.state.loading）{
返回(
加载。。。
);
}否则{
如果（此.state.isResetVerified）{
返回(
);
}否则{
返回(
);
}
}
}

这是一个基本的行动

此外，在构造函数中，

this.verfiyResetPassword=this.verfiyResetPassword.bind（this）；
只有在通过诸如button
onClick
或类似的DOM事件执行
verfiyResetPassword（）
时才需要

希望这有帮助！
我仍然可以自己修复错误：

类pwretconfirmpage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isValid:false，
代码：“，
};
this.verfiyResetPassword=this.verfiyResetPassword.bind（this）；
}
componentDidMount（）{
常量参数=（新URL）(`http://dummy.com${this.props.location.search}`）.searchParams；
常量代码=params.get（“oobCode”）
this.setState（{code:code}）
验证doVerfiyPasswordReset（代码）
.然后（（）=>{
这是我的国家({
…这个州，
是的，
});
})
.catch（（）=>{
这是我的国家({
…这个州，
isValid:false，
});
})
}
verfiyResetPassword（）{
if（this.state.isValid）{
返回(
);
}否则{
返回(
);
}
}
render（）{
返回(
{this.verfiyResetPassword（）}
);
}
}
导出默认PWResetConfirmPage
请记住，浏览器中有开发人员工具，可以让您检查内部并查看请求和响应。@jdv感谢您的回答，但安装React-DEV工具后，我找不到任何东西，这看起来像是一个错误……您对原因有其他想法吗？我的函数是“verfiyResetPassword”吗正确吗？此函数能否返回某些内容？
verfiyResetPassword（）
可能是不正确的，您不能在承诺的范围内以这种方式返回JSX。在基本级别上，您最好在then/catch中设置一个布尔状态属性，并根据该属性有条件地进行渲染。@AlexanderStaroselsky感谢您的回答……我是React初学者，您能告诉我，我如何使用我的文件实现这一点吗？伙计是的，谢谢，但是您什么时候在这个组件中执行
verfiyResetPassword（）
？是在组件加载时执行的吗？是在单击某个按钮时执行的吗？是如何触发的？谢谢您的回答，但我仍然可以自己修复错误；）