React無法從API訪問Json Resposne

Question

在登錄后的網站上，我得到一個確認和一個令牌，我需要將其存儲並作為屬性傳遞給所有頁面。我能夠接收該令牌，但是我無法存儲該令牌的值並將其存儲作為狀態值。

這是我到目前為止嘗試過的代碼。

import React from 'react'
import ReactDOM from 'react-dom'
import {Login_Submit_style,Login_button_style,Login_text_field_style,
password_style,para_login_style} from './style'

import Supers from 'superagent'

class Login extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state={username:'',password:''}
    this.Login_data_password=this.Login_data_password.bind(this)
    this.Login_data_username=this.Login_data_username.bind(this)
    this.MainRedirect=this.MainRedirect.bind(this)
    this.api_call_login=this.api_call_login.bind(this)
  }

Login_data_username(e)
{
  this.setState({username:e.target.value})
}

Login_data_password(password)
{
  this.setState({password:password.target.value})
}

MainRedirect()
{
  window.location = '/main';
}

api_call_login()
{
  Supers.post('http://127.0.0.1:8000/user_ops/user_login/')
  .send({'username':this.state.username,'password':this.state.password})
  .then(response => response.json())
  .then(responseData=>{
    console.log(responseData);
  })
    }



render()
{
  return(
    <div style={{background:'yellow'}}>
      <div>
        <h1 style={{marginLeft:550}}>Login Page</h1>
        <div>
          <p style={para_login_style}><b>Username</b></p>
          <input type="text" style={Login_text_field_style} onChange={this.Login_data_username}/>
          <h2>{this.state.username}</h2>
        </div>
        <div>
          <p style={para_login_style} ><b>Password</b></p>
          <input type="password" style={password_style} onChange={this.Login_data_password}/>
        </div>
        <div>
          <button style = {Login_Submit_style} onClick={this.api_call_login}> Log in </button>
        </div>
      </div>
    </div>
  )
}
}

這是我得到響應的格式：{“ Successful_Login”：“ True”，“ token”：“ d278f30445aa0c37f274389551b4faafee50c1f2”}

所以理想情況下，我想存儲從json output.Adn返回的兩個鍵的值，當我使用response.body時，我能夠以上述格式獲取數據。

Answer 1

我不知道這是否對您有幫助，但我會盡力的。

從瀏覽器到API的XHR調用等操作都是異步完成的。 您得到的回報是一個承諾，它將在對API的調用完成后執行您提供的功能。 您的代碼正確地具有回調函數。

但是，我不認為回調函數可以調用setState，因為我認為（我可能是錯誤的）React不會喜歡它。

我將Redux用於React作為一種存儲內容的方法，該應用程序的其余部分可以在需要時抓取。 更好的是，Redux以這樣的方式集成到React中：無論何時更新此中央數據庫，任何從中提取數據（通過props）的組件都將自動更新（重新呈現）。

我想我應該為您提供有關Redux的文檔，以獲取更多信息。 Redux也有替代方案。

祝你好運，如果遇到困難，請問更多問題。

Answer 2

為了使用json響應中的值設置新狀態，理想情況下，我會在您的promise響應中正確地調用this.setState。

api_call_login()
{
  Supers.post('http://127.0.0.1:8000/user_ops/user_login/')
  .send({'username':this.state.username,'password':this.state.password})
  .then(response => response.json())
  .then(responseData=>{
    this.setState({ 
      Successful_Login: responseData.Successful_Login,
      token: responseData.token
  })
}

響應到達時，狀態會更新。

如果可能的話，請嘗試使用小寫或camelCase作為密鑰。

Answer 3

如果您可以在我們可以看到實際情況的鏈接上發布鏈接，那就太好了，但是按照我的理解，您必須在請求中添加.set('Accept', 'application/json')才能獲取正確的json 。 因此，您的代碼應類似於：

Supers.post('http://127.0.0.1:8000/user_ops/user_login/')
      .send({'username':this.state.username,'password':this.state.password})
      .set('Accept', 'application/json')
      .then(response => response.json())
      .then(responseData=>{
            console.log(responseData);
})

由於我無法測試，因此您必須查看它是否有效。 另外，我建議您嘗試使用超級代理

讓我知道是否有幫助！