在响应条件返回中使用API​​ JSON数据

Question

我有一个小型的（从未用于生产的）Express / React应用程序，我正在验证express中的散列图钉，如果验证失败，则返回message: false，如果验证成功，则返回message: <cardnumber>。在我的反应前端中，如果它返回卡号，我想最终进行重定向，但是首先，我只是试图有条件地渲染组件。

我有一个用于json响应的构造器

constructor() {
    super();
    this.state = {
      cardnumber: '',
      pin: '',
      servercardnumber: {
        message: ''
      }
    };

然后我从这样的API获取数据

  const url = '/api/login';
    const serverResponse = await fetch(url, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials': true
      },
      body: JSON.stringify(data)
    });
    const json = await serverResponse.json();
    console.log(json);

    this.setState(
      prevState => {
        return {
          servercardnumber: json.cardnumber
        };
      },
      () => {
        console.log(this.state.cardnumber);
      }
    );
  };

然后我要在我的反应返回中有条件地渲染一个材质ui组件

 render() {
    const { cardnumber, pin, servercardnumber } = this.state;
    return (
      <React.Fragment>
        <Card>{!servercardnumber ? <Card> Server says no</Card> : null}</Card>
        {console.log('server says:')}
        {console.log(servercardnumber)}

{console.log(servercardnumber)}首先返回正确的服务器卡号，然后返回未定义。

我需要的是在条件渲染中查看响应，并在登录成功后显示渲染的组件（或者，如果我不成功，则显示，如果我能有条件地渲染，则显示）

为了使此代码正常工作，我对代码进行了很多更改，因此似乎有些混乱。

相关文件的完整前端代码：https://pastebin.com/VbdzmE4E 相关文件的服务器代码：https://pastebin.com/TZ35NZxa

Answer 1

在此处重新发布我的评论，以便可以解决问题。

状态属性servercardnumber应该设置为json.message，而不是json.cardnumber。