Блог

В настоящее время я использую 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() для форматирования строки JSON для запроса body , но я не знаю, как получить доступ к компоненту state на данный момент:

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

Одна из попыток, которую я предпринял, заключалась в том, чтобы сделать это:

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

Приведенный выше код выдал ошибку. Я также пытался использовать {{this.state.username}} , но это также дало ту же синтаксическую ошибку.

Могу ли я достичь того, чего я хочу? Я передаю динамические поля ввода, и я хотел бы, чтобы это поле было значением состояния. Есть идеи?

Если 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
}
  

Надеюсь, это поможет