Question

我正在学习反应和减少。尝试从服务器获取数据并在页面上呈现它。但是得到错误。我做错了什么？

index.js

import 'babel-polyfill'; 
import React from 'react';
import ReactDOM from "react-dom"; 
import {Provider} from 'react-redux';
import {createStore} from "redux"; 
import {applyMiddleware} from 'redux' 
import thunk from 'redux-thunk' 
import {createLogger} from 'redux-logger'
import allReducers from "./reducers";
import App from './components/app';


const middleware = [ thunk ]
if (process.env.NODE_ENV !== 'production') {
}

const store = createStore(
  allReducers,
  applyMiddleware(...middleware)
)

ReactDOM.render(
    <Provider store={store}>   
        <App/>
    </Provider>,
    document.getElementById('root')
);

动作/ index.js

export const fetchPostsRequest = () => {
  return {
    type: "FETCH_REQUEST"
  }
}

export const fetchPostsSuccess = (payload) => {
  return {
    type: "FETCH_SUCCESS",
    payload
  }
}

export const fetchPostsError = ()  => {
  return {
    type: "FETCH_ERROR"
  }
}

export const fetchPostsWithRedux = () => {
    return (dispatch) => {
    dispatch(fetchPostsRequest());
    return fetchPosts().then(([response, json]) =>{
        if(response.status === 200){
        dispatch(fetchPostsSuccess(json))
      }
      else{
        dispatch(fetchPostsError())
      }
    })
  }
}

export const fetchPosts = () => {
  const URL = "https://jsonplaceholder.typicode.com/posts";
  return fetch(URL, { method: 'GET'})
     .then( response => Promise.all([response, response.json()]));
}

容器/ posts.js

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {fetchPostsRequest, fetchPostsSuccess, fetchPostsError, fetchPostsWithRedux, test} from '../actions/index';

class Posts extends Component {

    componentDidMount(){
        this.props.fetchPostsWithRedux() 
    }

    render(){
      return (
        <div>
        hey
        {
            Object.keys(this.props.posts).map(function(key) {
                return <div>Key: {key}, Value: {this.props.posts[key]}</div>;
            })
        }
        </div>
      )
    }
}


function mapStateToProps(state){
    return {
        posts: state.posts
    }
}

function matchDispathToProps(dispatch){
    return bindActionCreators({test: test, fetchPostsWithRedux: fetchPostsWithRedux}, dispatch)
}

export default connect(mapStateToProps, matchDispathToProps)(Posts);

组件/ app.js

import React from 'react';
import UserList from '../containers/user-list';
import UserDetail from '../containers/user-detail';
import Posts from '../containers/posts';
require('../../scss/style.scss');

const App = () => (
    <div>
        <h2>Username List:</h2>
        <UserList />
        <hr/>
        <h2>User Details:</h2>
        <UserDetail />
        <hr/>
        <h2>Posts:</h2>
        <Posts />
    </div>
);

export default App;

减速器/减速器-posts.js

export default function(state = {}, action) {
  switch (action.type) {
    case "FETCH_REQUEST":
      return state;
    case "FETCH_SUCCESS": 
      return {state, posts: action.payload}; 
    default:
      return state;
  }
}

减速器/ index.js

import {combineReducers} from "redux";
import UserReducer from "./reducer-users"; 
import ActiveUserReducer from "./reducer-active-user";
import PostsReducer from "./reducer-posts";

const allReducers = combineReducers({ 
    users: UserReducer, 
    activeUser: ActiveUserReducer,
    posts: PostsReducer
});

export default allReducers;

尝试从服务器获取数据并在页面上呈现它。但是得到错误。我做错了什么？

Answer 1

this

匿名函数重新绑定(key) => { ... }。您可以使用箭头功能this或自己绑定function (key) {}.bind(this) SecureString

Redux：Uncaught（承诺）TypeError：无法读取未定义的属性'props'

1 个答案: