Где я должен положить tokenConfig (getState) в componentDidMount? - PullRequest
Новая
       37

Где я должен положить tokenConfig (getState) в componentDidMount?

0 голосов
/ 03 мая 2020

пожалуйста, помогите мне. В AeonList componentDidMount мне нужно передать токен, чтобы получить доступ к данным в бэкэнде. Но я получаю TypeError: getState не является ошибкой функции. Я понимаю, что компонент AeonList также должен быть на избыточном, но я считаю, что есть способ сделать это.

Компонент AeonList: 

import {tokenConfig} from "../../actions/authActions"
import {returnErrors} from '../../actions/errorActions'

const Aeon = props => (
  <Tr>
    <Td>{props.aeon.productName}</Td>
    <Td><AeonImages dataFromAeonList = {props.aeon.productImage}/></Td>
    <Td>{props.aeon.productCategory}</Td>
    <Td>{props.aeon.weight}</Td>
    <Td>{props.aeon.unit}</Td>
    <Td>{props.aeon.productPriceIdr}</Td>
    <Td>{props.aeon.productPriceAud}</Td>
    <Td>{props.aeon.countryOfManufacture}</Td>
    <Td>{props.aeon.productClaims}</Td>
    <Td>{props.aeon.typeOfPackaging}</Td>
    <Td>{props.aeon.positioningInStore}</Td>
    <Td>{props.aeon.promotion}</Td>
    <Td>{props.aeon.importer}</Td>
  </Tr>
)
class AeonsList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      aeons: [],
      query: '',
      intervalId: 0,
      showImage: false,
      fileName: 'AeonList'
    };
    this.handleCounter = this.handleCounter.bind(this);
  }
  componentDidMount(getState) {
    axios.get('http://localhost:5000/aeons', tokenConfig(getState))
    .then(response => {
      this.setState({
        aeons: response.data
      })
    })
    .catch((error) => {
      console.log(error);
    })
  }

компонент authActions, откуда я звоню tokenConfig 

import axios from 'axios';
import {returnErrors} from './errorActions'
import {
  USER_LOADED,
  USER_LOADING,
  AUTH_ERROR,
  LOGIN_SUCCESS,
  LOGIN_FAIL,
  LOGOUT_SUCCESS,
  REGISTER_SUCCESS,
  REGISTER_FAIL
} from './types';
//Check token and load user
export const loadUser = () => (dispatch, getState) => {
  dispatch({ type: USER_LOADING });

  axios.get('http://localhost:5000/auth/user', tokenConfig(getState))
  .then(res => dispatch({
    type: USER_LOADED,
    payload: res.data
  }))
  .catch(err => {
    dispatch(returnErrors(err.response.data, err.response.status))
    dispatch({
      type: AUTH_ERROR
    })
  })
}

export const register = ( {email, company, name, country, state, position, password} ) => dispatch => {
  const config = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  const body = JSON.stringify({email, company, name, country, state, position, password})

  axios.post('http://localhost:5000/users', body, config)
  .then(res => dispatch({
    type: REGISTER_SUCCESS,
    payload: res.data
  }))
  .catch(err => {
    dispatch(returnErrors(err.response.data, err.response.status, 'REGISTER_FAIL'))
    dispatch({
      type: REGISTER_FAIL
    })
  })
}
export const login = ( {email, password} ) => dispatch => {
  const config = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  const body = JSON.stringify({email, password})

  axios.post('http://localhost:5000/auth', body, config)
  .then(res => dispatch({
    type: LOGIN_SUCCESS,
    payload: res.data
  }))
  .catch(err => {
    dispatch(returnErrors(err.response.data, err.response.status, 'LOGIN_FAIL'))
    dispatch({
      type: LOGIN_FAIL
    })
  })
}

export const logout = () => {
  return {
    type: LOGOUT_SUCCESS
  }
}

export const tokenConfig = getState => {

  const token = getState().auth.token;
  const config = {
    headers: {
      "Content-type": "application/json"
    }
  }
  if(token){
    config.headers['x-auth-token'] = token
  }
  return config
}
...