在我的应用中，POST方法在axios中不起作用

Question

我已经在react js中创建了一个按钮，单击它应该使用axios https://149.129.128.3:5443/wcs/resources/store/1/guestidentity

对网址执行POST方法

但是，相反，它向我抛出了错误。

但是，如果我使用POST方法进行POSTMAN / Api测试器应用程序，则使用相同的网址，就会收到此响应。

{
"personalizationID": "1540911564271-271",
"resourceName": "guestidentity",
"WCToken": "1283%2CxZaF%2B0sJC6%2B1iH7O1216DPA1lYNyfzA44ziA4Qn0xDY4TJWdHxUgetyqnU31dp1m5j02Ppumc55lRNLGiRpc9SNQmbTdLSkgfey5cig28PBXtqLNEa2od4Gy2g1OWQ%2Bo0uplGYkSpyLqAnpi3Fnb9DKfiJ8hLzJFDxUh3tpAIH72DupPU1BF59MfZ1qeXGhlpyL2Hcf60GSdpkzKRbJmTO2t2VrV2xNWO9arivV5TxM%3D",
"userId": "1283",
"WCTrustedToken": "1283%2C2XbylA4QPc%2B4NS3yjcscvmLmgY8BKSc%2Fy2b0z9%2BkFYQ%3D"
}

下面是我的代码：

import React, { Component } from "react";
import axios from "axios";

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: "",
      isLoading: false
    };
    this.click = this.click.bind(this);
  }

  click() {
    this.setState({ isLoading: true });

    axios
      .post(
        "https://149.129.128.3:5443/wcs/resources/store/1/guestidentity",
        {}
      )
      .then(response => {
        this.setState({ data: response.data, isLoading: false });
      })
      .catch(err => {
        this.setState({ data: err, isLoading: false });
      });
  }
  render() {
    const name = this.state.data && this.state.data.name;
    return (

      <div>
        <button onClick={this.click} disabled={this.state.isLoading}>{'click me'}</button>
        {name}
      </div>
    );
  }
}

export default Login;

有人可以帮我这个忙吗？如果有人可以提供我的见解或指导我，我将不胜感激。我不知道我的代码出了什么问题。

Answer 1

我在这里假设{this.state.data}是一个对象，您不能仅仅将一个对象放入React代码并期望它呈现。

如果它是一个数组，则考虑在返回之前在渲染器中做类似的事情，假设您的数据是一个数组，每个对象都有一个name属性：

let dataArray = this.state.data.map((item) => item.name);

然后在您使用{dataArray}的代码中使用{this.state.data}

如果它是一个具有属性的对象，那么您可能需要在返回之前使用渲染中的console.log('data = ', this.state.data);来找出那些属性

然后可以说this.state.data.name是您拥有的属性，您可以在代码中使用它，也可以在返回之前在渲染器中使用它：

const name = this.state.data && this.state.data.name;

然后在渲染器中使用{name}来显示值。

您还可以在此处清除按钮的另一件事：

<button onClick={this.click} disabled={this.state.isLoading}>
      {' click me '}
</button>