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);
})

由于我无法测试，因此您必须查看它是否有效。 另外，我建议您尝试使用超级代理

让我知道是否有帮助！