Javascript 在react条件返回中使用API JSON数据

我有一个小型（从不用于生产）Express/React应用程序，我正在Express中验证散列pin，如果验证失败，则返回

消息：false

，如果验证成功，则返回

消息：

。在react前端中，如果它返回一个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);
      }
    );
  };

然后我尝试在我的react返回中有条件地呈现一个材质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)}

render（）{
const{cardnumber，pin，servercardnumber}=this.state；
返回(
{！服务器卡号？服务器说否：null}
{console.log（'服务器说：'）}
{console.log（servercardnumber）}

{console.log（servercardnumber）}

首先返回正确的servercardnumber，然后返回undefined

我需要的是在条件呈现中查看响应，如果登录成功，则显示呈现的组件（如果登录不成功，则显示，只要我让它进行条件呈现）

为了让它正常工作，我对这段代码做了很多修改，所以看起来可能有点混乱

相关文件的完整前端代码：

---

相关文件的服务器代码：

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

---

状态属性

servercardname

应该设置为

json.message

而不是

json.cardname

你不应该将

servercardname

状态设置为

json.message

而不是

json.cardnber

？泰勒，你说得对，非常感谢！我在这方面花了这么多时间，sh你应该重新阅读整个代码。