Question

我当前正在使用fetch()通过以下代码发布HTTP请求：

  getAuthToken = () => {
    fetch('https://example.com/api/auth/login', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: 'userstring',
        password: 'passstring',
      }),
    }
  )
  .then((res) => res.json())
  .then((responseJson) => {
    return responseJson.token;
  });
  }

我想从组件传递状态作为请求的body数据。我正在使用JSON.stringify()为请求body格式化JSON字符串，但目前我不知道如何访问组件state：

  body: JSON.stringify({
    username: 'userstring',
    password: 'passstring',
  }),

我试图做的就是这样做：

  body: JSON.stringify({
    username: {this.state.username},
    password: {this.state.password},
  }),

上面的代码产生了错误。我也尝试使用{{this.state.username}}，但这也带来了相同的语法错误。

我可以实现我想要的吗？我正在传递动态输入字段，但我只想让该字段成为state的值。有什么想法吗？

Answer 1

如果在组件类中定义了getAuthToken()，那么您应该能够直接访问状态对象，而无需使用{ .. }语法。一种方法可能如下：

class YourComponent extends React.Component {

    // If getAuthToken defined as class field then it can access this.state
    getAuthToken = () => {

        // If state not initialized, early exit
        if(!this.state) {
            return
        }

        // Extract username and password from state
        const { username, password } = this.state

        fetch('https://example.com/api/auth/login', {
            method: 'POST',
            headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                // Use authentication data from form in request
                username,
                password,
            })
        })
        .then((res) => res.json())
        .then((responseJson) => responseJson.token)
        .then((token) => {
            console.log(`token:${token}`)
        });
    }
}

根据组件的实现方式，可能值得在尝试从组件中提取state之前对其进行验证，如上所示：

if(!this.state) {
    return
}

希望这会有所帮助

React Native：使用组件状态获取请求

1 个答案: