时间戳

首页 > 解决方案 > 从组件上的函数调度访问值

reactjs - 从组件上的函数调度访问值

问题描述

我是新来的反应。

我有一个函数，需要根据我的组件上的 API 请求结果刷新状态。

我如何访问该值？

代码（示例）：

登录组件.js

        class Login extends React.Component {
           constructor(props){
              super(props)
              this.state = {
                 username : '',
                 password : ''
              }
           }
           submit = (e) => {
              /* console.logging "Some response"*/
              console.log(this.props.doLogin(this.state))
           }
           render(){
              return (
                 <form onSubmit={this.submit}>/* some login element */</form>
              )
           }
        }

export default connect(null, {LoginAction})(Login);

登录动作.js

export function doLogin(state){
   return dispatch => {
      return axios.post('login', state).then(res =>{

      return "Some response";

    })
   }
}

标签： reactjsreact-nativereact-reduxredux-thunk

解决方案

你可以这样做

例如创建 axios.js

import axios from 'axios';

var instance = axios.create({
      baseURL: 'https://www.',
      timeout: 1000,
      headers: {'Authorization': 'Bearer xxx'}
});
export default instance;

然后在你的另一个屏幕上

import React from 'react';
import API from '../axios';


export default class Profile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      feedback: "",
      id: "",
      errors: {},
    };
}


  postComment = () => {
        API.post(`/new-comment`, {
          id: this.state.id,
          feedback: this.state.feedback,
        })
        .then(res => res.data)
        .then((response)=> {
          this.setState({
              feedback: '',
              error: response.error || null,
          })

        }).catch(error => {console.log(error), this.setState({ error});});
   }

推荐阅读