Question

mapStateToProps中存在状态未定义的问题，这确实使我发疯。 Stackoverflow中有很多未定义的问题主题，但到目前为止，我使用的代码适合所有条件，但仍然不确定。

我的代码基于https://github.com/JulianCurrie/CwC_React_Native/tree/redux_tutorial

我正在使用新版本的React native和Redux。 “反应”：“ 16.11.0”， “ react-native”：“ 0.62.2”， “ react-redux”：“ ^ 7.2.0”， “ redux”：“ ^ 4.0.5”

这些是文件。

index.js

import React from 'react';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import {Provider} from 'react-redux';

import configStore from './app/store';

const store = configStore();

const TestApp = () =>
<Provider store={store}>
    <App/>
</Provider>

AppRegistry.registerComponent(appName, () => TestApp);

App.js

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Button,
  Text,
} from 'react-native';

import {connect} from 'react-redux';
import {createChat} from './app/actions/chat'

const addItem = () => {
  this.props.add('Add Content MSG');
}

const App: () => React$Node = () => {
  return (
    <>
      <SafeAreaView>
        <Text>{this.chats.length}</Text>
        <Button onPress={addItem} title="Add Msg"/>
      </SafeAreaView>
    </>
  );
};


const mapStateToProps = (state) => {
  return {
    chats: state.chatReducer.chatList
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    add: (data) => dispatch(createChat(data))
  }
}

export default connect(mapDispatchToProps,mapStateToProps)(App);

app / actions / chat.js

import {CREATE_CHAT,DELETE_CHAT} from './types';

export const createChat = (data) => (
    {
        type: CREATE_CHAT,
        data: data

    }
);

export const deleteChat = (key) => (
    {
        type: DELETE_CHAT,
        key: key

    }
);

app / store.js

import {createStore, combineReducers} from 'redux';
import chatReducer from './reducers/chatReducer'

const rootReducer = combineReducers({
    chatReducer:chatReducer
})

const configureStore = () => createStore(rootReducer);

export default configureStore;

app / reducers / chatReducer.js

import {CREATE_CHAT,DELETE_CHAT} from '../actions/types';

const initialState = {
    chatList: [],
}

const chatReducer = (state = initialState, action) => {


    switch(action.type){
        case CREATE_CHAT:
           return {
                ...state,
                chatList: state.chatList.concat({
                    _id:  Math.random().toString(12).substring(0) ,
                    text: action.data,
                    createdAt: new Date(),
                    user: {
                      _id: 1,
                    },
                    sent: true,
                    received: true,
                    pending: true,
                  })
            }

        case DELETE_CHAT:
            return {
                ...state,
                chatList: state.chatList.filter((item) => 
                item.key !== key)
            }
        default:
            return state;
    }
    

};

export default chatReducer;

app / actions / types.js

import {CREATE_CHAT,DELETE_CHAT} from './types';

export const createChat = (data) => (
    {
        type: CREATE_CHAT,
        data: data

    }
);

export const deleteChat = (key) => (
    {
        type: DELETE_CHAT,
        key: key

    }
);

app / actions / types.js

export const CREATE_CHAT = 'ADD_CHAT';
export const DELETE_CHAT = 'DELETE_CHAT';

this.props也不起作用，因为在redux中有许多不同的实现版本，它确实令人沮丧。

我真的希望有人知道如何解决此问题。

谢谢。

Answer 1

似乎您的参数顺序错误。

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 2

您没有使用.issue-page { margin-top: 50px; justify-content: center; display: flex; }，

您可能会从道具中获取数据，如下所示：

props

const App: () => React$Node = (props) => { return ( <> <SafeAreaView> <Text>{this.props.chats.length}</Text> <Button onPress={addItem} title="Add Msg"/> </SafeAreaView> </> ); };负责通过mapStateToProps函数将redux存储的数据传递到组件props！

mapStateToProps状态未定义

2 个答案: