React无法从API访问Json响应

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

由于我无法测试，你必须看看它是否有效。或者，我建议你尝试使用superagent

如果有帮助，请告诉我！