Question

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

这是错误：

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

   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）的结果，它显示尽管使用了mapStateToProps，但未定义tweetListTweets。

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

Answer 1

You forgot to access it within your TweetListReducer:

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

Answer 2

当您在mapStateToProps中返回时，请检查state.tweetListTweets的值。似乎它是未定义的，但状态是定义的。通常当你想要从商店的状态获得某些东西时，你可以用状态来做。＆lt; reducer_name＆gt;。 tweetListTweets。我不确切地知道你是如何在reducers.js中定义它的。但这应该为解决方案提供依据。

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

简单的方法，只需在mapState中记录map.log状态并查找位置 tweetListTweets是。

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

2 个答案: