Question

因此，我正尝试在home组件呈现之前从后端获取一些数据：

这是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错误，该错误指向home组件。即使我调用GetInitialData2（仅打印内容）或GetInitialData。

有些事情我不了解。我不需要将任何内容传递给我的GetInitialData函数，因为它所做的只是更改redux存储。

编辑-使用中间件：

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并从浏览器控制台手动运行store.dispatch来解决这个问题的。。。我仍然不明白为什么这个错误没有出现。

反应调用无状态组件

0 个答案: