React-Redux mapStateToProps 值在被reducer设置后未定义答案

【问题标题】：React-Redux mapStateToProps value is undefined after being set by reducerReact-Redux mapStateToProps 值在被reducer设置后未定义
【发布时间】：2018-07-13 15:25:27
【问题描述】：

我正在尝试使用一些用于测试的虚拟数据来初始化我的应用程序的状态，但我无法让它呈现。根据我在下面的控制台日志，数据似乎存在于应用程序状态中，但是当我尝试在我的 TweetList 组件中访问它时，尽管使用了 connect 和 mapStateToProps，但它是未定义的。知道这是为什么吗？

这是错误：

TypeError：无法读取未定义的属性“地图”

   7 | class TweetList extends Component {
   8 |   renderTweetBlocks(tweetArray) {
>  9 |     return this.props.tweetListTweets.map((tweet) => {
  10 |       return <TweetBlock key={tweet.tweet_id} tweet={tweet} />;
  11 |     });
  12 |   }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

import reducers from './reducers';
import App from './App';

let store = createStore(reducers);
console.log(store.getState());

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

reducer_tweetlist.js

/* eslint-disable */
import { DROP_IN_CATEGORY } from '../actions/index';

export default function( state = {
    tweetListTweets: [
    {username: "user1", content: "content1", tweet_id: "1"},
    {username: "user2", content: "content2", tweet_id: "2"},
    {username: "user3", content: "content3", tweet_id: "3"},
    {username: "user4", content: "content4", tweet_id: "4"},
    {username: "user5", content: "content5", tweet_id: "5"}]
  }, action) {
  switch(action.type) {
    case DROP_IN_CATEGORY:
      const id = action.payload.tweet.tweet_id;
      return state.tweetListTweets.filter(tweet => tweet.tweet_id != id);
  }
  return state;
}

TweetList.js

import React, { Component } from 'react';
import TweetBlock from './TweetBlock';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchNewTweet } from '../actions/index';

class TweetList extends Component {
  renderTweetBlocks(tweetArray) {
    return this.props.tweetListTweets.map((tweet) => {
      return <TweetBlock key={tweet.tweet_id} tweet={tweet} />;
    });
  }

  render() {
    console.log(this.props);
    return (
      <div className="tweet-list">
        {this.renderTweetBlocks()}
      </div>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchNewTweet }, dispatch);
}

function mapStateToProps(state) {
  return { tweetListTweets: state.tweetListTweets };
}

TweetList = connect(mapStateToProps, mapDispatchToProps)(TweetList);
export default TweetList;

这是index.js中console.log(store.getState())的结果，所以状态中似乎应该存在tweetListTweets。

{TweetListReducer: {…}}
TweetListReducer:
  tweetListTweets:
    Array(5)
    0: {username: "user1", content: "content1", tweet_id: "1"}
    1: {username: "user2", content: "content2", tweet_id: "2"}
    2: {username: "user3", content: "content3", tweet_id: "3"}
    3: {username: "user4", content: "content4", tweet_id: "4"}
    4: {username: "user5", content: "content5", tweet_id: "5"}
    length: 5
__proto__: Array(0)
__proto__: Object
__proto__: Object

这是 TweetList.js 中的 console.log(this.props) 的结果，它显示了 tweetListTweets 未定义，尽管使用了 mapStateToProps。

{tweetListTweets: undefined, fetchNewTweet: ƒ}
  fetchNewTweet: ƒ ()
  tweetListTweets: undefined

【问题讨论】：

你能告诉我你组合减速器的文件吗？

标签： reactjs redux react-redux

【解决方案1】：

您忘记在TweetListReducer 中访问它：

function mapStateToProps(state) {
  return { tweetListTweets: state.TweetListReducer.tweetListTweets };
}

【讨论】：

【解决方案2】：

当您在 mapStateToProps 中返回时，请检查 state.tweetListTweets 的值。它似乎是未定义的，但状态是定义的。通常，当您想从商店状态中取出某些东西时，您可以使用 state.reducer_name>。推文列表推文。我不知道你是如何在 reducers.js 中定义它的。但这应该为解决方案提供要点。

function mapStateToProps(state) {
  return { tweetListTweets: state.<reducer_name that you have defined in reducers.js>.tweetListTweets };
}

简单的方法，只需 console.log 在 mapStateToProps 中的状态并找到位置 tweetListTweets 是。

【讨论】：