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

Posted 2023-03-24

【中文标题】React-Redux mapStateToProps 值在被reducer设置后未定义

【英文标题】：React-Redux mapStateToProps value is undefined after being set by 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

【问题讨论】：

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

【参考方案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 是。