Question

我必须更新我的用户个人资料，其中包含5个字段，名称，生物地址，图像和性别。我在Django上创建了使用auth Knox令牌进行身份验证的完美工作API。

我已经在登录状态下存储了身份验证令牌。减速器看起来像这样：

   case 'LOGIN_SUCCESSFUL':
        case 'REGISTRATION_SUCCESSFUL':
            localStorage.setItem("token", action.data.token);
            return {...state, ...action.data, isAuthenticated: true, isLoading: false, errors: null};

我以后可以像这样访问令牌：

let headers = {"Content-Type": "application/json"};
    let {token} = getState().auth;

    if (token) {
      headers["Authorization"] = `Token ${token}`;
    }

我的问题是：我如何制作一个以该标记为标题并发出投递请求的表格？减速器将是什么，将采取什么行动？

class Profile extends Component {

  constructor(props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)
  }


  handleSubmit(e) {
    e.preventDefault()

    console.log(this.props.Name)
  }
  change = e => {
    console.log(e.target.name)
    values.push(e.target.value)


    [e.target.name]: e.target.value

  }
  render() {


    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label htmlFor="Name">Name</label>
          <input name="Name" onChange={e => this.change(e)} component="input" type="text" />
        </div>

        <div>
          <label htmlFor="Bio">Bio</label>
          <input name="Bio" component="input" onChange={e => this.change(e)} type="text" />
        </div>

        <div>
          <label htmlFor="Address">Address</label>
          <input name="Address" component="input" onChange={e => this.change(e)} type="text" />
        </div>

        <button type="submit">Submit</button>
      </form>
    )
  }


}



const mapStateToProps = (state) => {
  return {
    profile: state.user,

  }
}

const mapDiapatchToProps = (dispatch) => {
  return {
    updateprofile: (values) => dispatch(updateprofile(values))
  }
}

export default connect(mapStateToProps, mapDiapatchToProps)(Profile);

我尝试过此方法，但感到困惑如何将值发送给行动？还是我必须使用redux-form？

我要在以下API上发出放置请求：api/update/profile/${id}

请帮帮我。

Answer 1

您需要使用外部库进行HTTP调用，例如 Axios 。

您需要在操作文件中创建功能 updateProfile 。在此功能内，您需要使用Axios或所需的接口进行HTTP调用。使用axios，您的功能将是这样的：

  function updateProfile（）{
  返回（发送）=> {
    axios（{
      方法：“获取”，
      url：“ [您的API地址]”，
      标头：{授权：'[您的令牌]'}，
      数据：{
        名称：“ bruce”，
        lastName：“ bane”
      }
    }）。then（function（response）{
      调度（{
        类型：UPDATE_PROFILE，
        有效负载：响应
      }）;
    }）;

    返回null
  }
}

在您的Profile组件中，您需要更改 mapDispatchToProps 函数以从操作文件中调用 updateProfile 函数，如下所示：

  const mapDispatchToProps =（dispatch）=> {
  返回{
    updateprofile：（值）=>调度（profileActions.updateprofile（值））
  }
}

注意：我没有测试这段代码，但是将会接近此代码。希望能有所帮助。

Redux-form通过POST请求传递数据。

1 个答案: