Javascript 为什么我的；mapDispatchToProps“；找不到我的动作功能？

我所遇到的具体错误随着我所做的更改而有所不同，但是，我当前遇到的错误是“操作可能没有未定义的类型…”。我对使用Redux非常陌生，但我一直在互联网上搜寻任何足以让我遵循的一致性

TLDR：我试图做的只是发送一个如下所示的对象列表：记录：[{date:blah，…，var:blah}，{…}] 到全局状态，以便我可以在完整应用程序的所有部分中使用它

我曾尝试以各种方式更改mapDispatchToProps方法，但我仍然很难将其全部连接起来

我试着修改App.js以及相应的操作、减缩器和存储文件，但这一切似乎都与我下面的教程相同。如图所示：

以下是所有相关代码：

App.js '''

'''

actions/index.js '''

'''

actions/types.js

'''

'''

如前所述，我只想弄清楚如何将数据保存在存储中，并在以后从任何组件/屏幕/视图检索数据

非常感谢任何试图帮助我的人！我已经连续做了12个小时了：(

编辑1：

这是我遇到的新错误。唯一的变化是在

actions/index.js

中，我做了一个正确的

名为import

---

您在

actions.js

中有一个输入错误。您正在导入：

从“./types”导入添加记录；

但是，这是默认导入，而

types.js

正在执行命名导出：

export const ADD_RECORD='ADD_RECORD'；

您需要使用匹配的导入和导出语法，否则导入的值将是

未定义的

。这将导致操作对象具有未定义的

类型

字段，从而导致Redux错误

因此，将

actions.js

更改为使用命名导入，正如您在reducer文件中所做的那样：

从“/types”导入{ADD_RECORD}

此外，当atm代码正常工作时，您可以简化

MainScreen.js

中的

mapDispatch

定义以使用：

const-mapspatch={addRecord}；

---

作为补充说明，我强烈建议您使用它，它会自动为您生成动作类型和动作创建者函数，这样您就不必手动编写它们。

非常感谢您的回复，我现在就要测试一下！我会在这里回信，看看是否成功！非常感谢您的回复，我是g我现在就要测试它！我会在这里写下它是否成功！Edit1:所以我更改了您在

actions/index.js

中发现的问题，但我现在遇到了另一个似乎相关的问题。如果有帮助的话，我会更新我的帖子以包含新的错误？新的错误是一个完全不同的问题。问题是您正在修改正在尝试访问

this.props.records[0].startKM

，但

records

数组似乎为空。因此，

records[0]

返回

未定义的

，您无法访问

未定义的.startKM

，因此会引发异常。您需要修改逻辑，以便首先检查该对象是否确实存在。

import React, { Component } from 'react';

import {
createStackNavigator,
createAppContainer } from 'react-navigation';
import MainScreen from './screens/MainScreen';
import CostAnalysis from './screens/CostAnalysis';
import DriverLog from './screens/DriverLog';

// REDUX IMPORTS
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { recordReducer } from './reducers/recordReducer';

const MainNavigator = createStackNavigator({
  Home: {screen: MainScreen,
    navigationOptions: {
      header: null,
    }},
  CostAnalysis: {screen: CostAnalysis},
  DriverLog: {screen: DriverLog}
}, {
  defaultNavigationOptions: {
    header: null
  }
});

const AppContainer = createAppContainer(MainNavigator);

const store = createStore(recordReducer);

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <AppContainer />
      </Provider>
    );
  }
}

export default (App);

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Dimensions,
  TouchableOpacity,
  YellowBox,
} from 'react-native';

// REDUX IMPORTS
import { connect } from 'react-redux';

import Icon from 'react-native-vector-icons/Ionicons';

const device = Dimensions.get('window');

class CostAnalysis extends Component {
    render() {
        return (
            <View style={styles.mainContainer}>
                <Text>Hey you got here!</Text>
                <Text>{this.props.records[0]}</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    mainContainer: {
        height: device.height - 60,
        position: 'absolute',
        bottom: 0
    }
});

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

export default connect(mapStateToProps)(CostAnalysis);

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Dimensions,
  TouchableOpacity,
  YellowBox,
} from 'react-native';

// REDUX IMPORTS
import { connect } from 'react-redux';
import ADD_RECORD from '../actions/types';
import {addRecord} from '../actions/index';

import Icon from 'react-native-vector-icons/Ionicons';

import LinearGradient from 'react-native-linear-gradient';
import SpecialInput from '../components/SpecialInput';
import DateTimePicker from 'react-native-modal-datetime-picker';
import SpecialText from '../components/SpecialText';
import GenericButton from '../components/GenericButton';

const devWidth = Dimensions.get('window').width;
const devHeight = Dimensions.get('window').height;

class MainScreen extends Component {

componentWillMount() {
  YellowBox.ignoreWarnings([
    'Warning: componentWillMount is deprecated',
    'Warning: componentWillReceiveProps is deprecated',
  ]);
}

// State stuff
state = {
  date: 'Date',
  dateColor: 'rgba(255,255,255,0.6)',
  starting: '',
  ending: '',
  gasPriceCurrent: '',
  visible: false,
}

stringifyNumbers = (inputObj) => {
    return inputObj.toString().replace(/[^0-9.]/g, '')
}

handleDateConfirm = value => {
  this.setState({
    date: value.toString().substring(4, 15),
    dateColor: 'rgba(255,255,255,1)'
  });

  // Hide the date picker
  this.hideDatePicker();
}

handleStartChange = (value) => {
  this.setState({
    starting: value
  });
}

handleEndChange = (value) => {
  this.setState({
    ending: value
  });
}

handleGasChange = (value) => {
  this.setState({
    gasPriceCurrent: value
  });
}

hideDatePicker = () => {
  this.setState({
    visible: false
  });
}

showDateTimePicker = () => {
  this.setState({ 
    visible: true,
    dateColor: 'rgba(255,255,255,0.6)'
  });
}

recordEntry = () => {

  const record = {
    date: this.state.date,
    startKM: this.state.starting,
    endKM: this.state.ending,
    curPrice: this.state.gasPriceCurrent
  }

// This is where I try to add the record to the list
  this.props.addRecord(record);

  // Now go to confirmation
  this.props.navigation.navigate('CostAnalysis');
  // Reset input fields after recording entry
  this.resetInput();
}

// Reset input fields
resetInput = () => {
  this.setState({
    date: 'Date',
    dateColor: 'rgba(255,255,255,0.6)',
    starting: '',
    ending: '',
    gasPriceCurrent: '',
    visible: false
  });
}

render() {
  return (
        <LinearGradient 
          colors = {['#051937', '#A8EB12']}
          style ={styles.homeScreen}
          locations = {[0.23, 1]}
          start={{x: 0, y: 0}}
          end={{x: 0, y: 1}}>
          <Text style={styles.heading}>Hello</Text>
          <Text style={styles.subHeading}>
            Please start recording your starting and ending gas amounts
          </Text>
          <View style={styles.inputContainer}>
          <TouchableOpacity onPress={this.showDateTimePicker}>
              <SpecialText
                  content = {this.state.date}
                  style={{
                    fontSize: 22,
                    color: this.state.dateColor
                  }}
              />
            </TouchableOpacity>
            <DateTimePicker
              isVisible={this.state.visible}
              onConfirm={this.handleDateConfirm}
              onCancel={this.hideDatePicker}
            />
            <SpecialInput
              placeholder = {"Starting"}
              iconName = 'ios-car'
              iconText= '  KM'
              maxLength={3}
              style={styles.inputStyle}
              value={this.state.starting}
              placeholderTextColor={'rgba(255,255,255, 0.6)'}
              onChange = {this.handleStartChange}
            />
            <SpecialInput
              placeholder = {"Ending"}
              iconName = 'ios-car'
              iconText= '  KM'
              maxLength={3}
              style={styles.inputStyle}
              value={this.state.ending}
              placeholderTextColor={'rgba(255,255,255, 0.6)'}
              onChange={this.handleEndChange}
            />

            <SpecialInput
              placeholder = {"Current Gas Prices"}
              iconName = 'ios-pricetags'
              iconText= '  cents'
              maxLength={5}
              style={styles.inputStyle}
              value={this.state.gasPriceCurrent}
              placeholderTextColor={'rgba(255,255,255, 0.6)'}
              onChange={this.handleGasChange}
            />

            {/* Record the entry into data storage */}
            <GenericButton 
              style={styles.recordButton}
              textColor={'#ffffff'}
              placeholder = "RECORD"
              onPress={this.recordEntry} />

            {/* RESET BUTTON */}
            <GenericButton 
              style={styles.clearButton}
              textColor={'#ffffff'}
              placeholder = "CLEAR"
              onPress={this.resetInput} />
          </View>
        </LinearGradient>
    );
  }
}

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

// Here is where I noticed most of the errors pointing to
const mapDispatchToProps = dispatch => {
    return {
      addRecord: (record) => {
        dispatch(addRecord(record))
      }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MainScreen)

// recordReducer.js

import { ADD_RECORD } from '../actions/types'

const initialState = {
    records: ['Chicken Joe']
};

const recordReducer = (state = initialState, action) => {
    switch(action.type) {
        case ADD_RECORD:
            return {
                ...state,
                records: state.records.concat(action.value)
            };
        default:
            return state;
    }
}

export {recordReducer};

import ADD_RECORD from './types';

// Add Record Action
export const addRecord = record => {
    return {
        type: ADD_RECORD,
        payload: record
    }
}

export const ADD_RECORD = 'ADD_RECORD';