Проблема с рендерингом данных на следующем с redux-thunk - PullRequest
Новая
       16

Проблема с рендерингом данных на следующем с redux-thunk

0 голосов
/ 29 марта 2020

Я вызываю API в следующем js с помощью redux-thunk, но столкнулся с проблемой.

Я не могу увидеть мои данные, отображаемые на экране, хотя, когда я ссылаюсь sh, странице, до перезагрузки страницы данные отображаются в течение короткого промежутка времени и снова после повторной загрузки страницы, все исчезает, а также данные видны в «источнике страницы», но по некоторым причинам не отображаются на экране.

Вот мой код для этого 

_app.jsx
import App from 'next/app';
import {Provider} from 'react-redux';
import React from 'react';
import withRedux from "next-redux-wrapper";
import store from '../redux/store';

class MyApp extends App {

    static async getInitialProps({Component, ctx}) {
        const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};

        //Anything returned here can be accessed by the client
        return {pageProps: pageProps};
    }

    render() {
        //Page props that were returned  from 'getInitialProps' are stored in the props i.e. pageprops
        const {Component, pageProps, store} = this.props;

        return (
            <Provider store={store}>
                <Component {...pageProps}/>
            </Provider>
        );
    }
}

//makeStore function that returns a new store for every request
const makeStore = () => store;

//withRedux wrapper that passes the store to the App Component
export default withRedux(makeStore)(MyApp);

index.jsx 

import React from "react";
import { connect } from "react-redux";
import { onCallAPI } from "../redux/actions/counterActions";

class App extends React.Component {
  static getInitialProps({ store }) {
    store.dispatch(onCallAPI())
  }

  constructor(props) {
    super(props);
  }
  componentDidMount() {
    // this.props.onCallAPI();
  }

  render() {
      console.log(this.props.data)
    //   {this.props.data.map(item=><p>{item}</p>)}

    // {this.props.data.data.map(item=><p>{item}</p>)}
// const data=this.props.data.data
    // console.log(this.props.data.data.map(item=>console.log(item)));
    return (
      <React.Fragment>

      {this.props.data.map(item=><div key={item.userId}>{item.title}</div>)}
      </React.Fragment>
    );
  }
}

const mapStateToProps = state => {
  return { data: state.counter };
};

// const mapDispatchToProps = {
//     incrementCounter: incrementCounter,
//     decrementCounter: decrementCounter,
// };
export default connect(mapStateToProps, { onCallAPI })(App);

редукторы и действия работают нормально, потому что я получаю свои данные, поскольку я могу см. в «источнике страницы» проблема, я думаю, здесь, я думаю.

...