代码之家 › 专栏 › 技术社区 › Mike Vlad

反应调用无状态组件

redux reactjs javascript

Mike Vlad · 技术社区 · 5 年前

所以我想在 home

这是 家

class App extends Component {
  constructor(props) {
    super(props);
    //asta e o alternativa la componentwillmount dar nu pot sa alterez
    //starea in constructor cica
  }

  componentWillMount(){
    console.log('componentWillMount is executing')
    console.log(store.getState())
    //GetInitialData.bind(this)()
    GetInitialData();
    console.log('component should have executed')
  }

这是我的无状态组件,负责发出请求并将响应发送到redux存储:

import axios from 'axios';
import { get_library } from '../../Redux/actions/Actions' 
import store from "../../Redux/store/Store";
import { connect } from "react-redux";

const mapDispatchToProps = dispatch => {
  return {
    get_library : context => dispatch(get_library(context))
  }
}

const GetInitialData2 = () => {
  console.log('This should work')
}

const GetInitialData = (props) => {

  console.log('Making the GET request')
  //axios.get('http://localhost:8080/try')
  axios({
    method : 'get',
    url : 'http://localhost:8080/getLibrary',
    headers : {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization' : 'Bearer ' + getToken(),
    },
  })
  .then(response => {
    console.log('Store in Initial Data')
    console.log(store.getState())
    //store.dispatch(get_library(response.data))
    //this.props.store.dispatch(get_library(response.data))
    props.get_library(response.data)
    //this.setState({ data: response.data });
    console.log('New state now')
    //console.log(this.state)
  })
};

function getToken() {
    // Retrieves the user token from localStorage
    return localStorage.getItem('id_token')
    }


//function GetInitialData (){ connect(null, mapDispatchToProps)(Connected_GetInitialData)}

//export default GetInitialData;
export default connect(null, mapDispatchToProps)(GetInitialData)

export default GetInitialData2;

我的问题是我总是 props is not defined 指向 家 组件,不管怎样。即使我调用GetInitialData2(它只打印某些内容)或GetInitialData。

编辑-使用中间件:

class App extends Component {

  componentDidMount() {
    console.log('In DidMount, calling function');
    GetInitialData();
    console.log('DidMount should have executed');
  }

const GetInitialData = () => {

  console.log('Making the GET request')
  //axios.get('http://localhost:8080/try')
  axios({
    method : 'get',
    url : 'http://localhost:8080/getLibrary',
    headers : {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization' : 'Bearer ' + getToken(),
    },
  })
  .then(response => {
    console.log('Store in Initial Data')
    console.log(store.getState())
    console.log(response.data)
    //store.dispatch(get_library(response.data))
    store.dispatch(get_library(response.data))
    //this.setState({ data: response.data });
    console.log('New store state now')
    console.log(store.getState())
  })
};

function getToken() {
    // Retrieves the user token from localStorage
    return localStorage.getItem('id_token')
    }


export default GetInitialData;

结果就是它停在 store.dispatch 什么也不做。所有的 console.logs 我得到了有效的回应。

结果。。。过了太多小时:似乎它在默默地我所在的减速器高度:

const initialState = {
  library: {},
  playlist_names: [],
  playlists : [],
  songs : [],
  articles : [],
};

相反,它应该是: library : []; ,错误为: TypeError: Invalid attempt to spread non-iterable instance . 我只是通过打印 response.data 在控制台中手动运行从浏览器控制台。。。我仍然不明白为什么那个错误没有出现。

0 回复 | 直到 5 年前