javascript - 在react条件返回中使用API​​ JSON数据

Question

我有一个小型(从未用于生产)Express/React 应用程序，我正在验证 Express 中的散列 pin 并返回 message: false如果验证失败或 message: <cardnumber>如果验证成功。在我的 react 前端中，如果它返回卡号，我希望最终重定向，但首先我只是尝试有条件地渲染组件。

我有一个 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 返回中有条件地渲染 Material 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。