在 React 本机组件中键入错误未定义的名称属性

Question

我在我的 EmployeeEdit 文件中收到未定义名称属性的类型错误.js。当我触摸员工列表中的一个项目时，我会收到此错误，而不是使用传递的参数转到员工编辑表单。我控制台记录并发现状态.employeeForm 没有加载从 EmployeeFormReducer { name, phone, shift }的值。我不知道为什么。

这是错误

TypeError: Cannot read property 'name' of undefined
This error is located at:
    in Connect(EmployeeForm) (at EmployeeEdit.js:21)
    in RCTView (at View.js:113)
    in View (at Card.js:6)
    in Card (at EmployeeEdit.js:20)
    in EmployeeEdit (created by Connect(EmployeeEdit))
    in Connect(EmployeeEdit) (at SceneView.js:35)
    in SceneView (at CardStack.js:413)
    in RCTView (at View.js:113)
    in View (at createAnimatedComponent.js:134)
    in AnimatedComponent (at Card.js:28)
    in Card (at PointerEventsContainer.js:55)
    in Container (at CardStack.js:443)
    in RCTView (at View.js:113)
    in View (at CardStack.js:373)
    in RCTView (at View.js:113)
    in View (at CardStack.js:372)
    in CardStack (at CardStackTransitioner.js:110)
    in RCTView (at View.js:113)
    in View (at Transitioner.js:192)
    in Transitioner (at CardStackTransitioner.js:60)
    in CardStackTransitioner (at StackNavigator.js:48)
    in Unknown (at createNavigator.js:36)
    in Navigator (at createNavigationContainer.js:198)
    in NavigationContainer (at App.js:37)
    in Provider (at App.js:36)
    in App (at renderApplication.js:35)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:126)
    in AppContainer (at renderApplication.js:34) 

员工编辑.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import _ from 'lodash';
import EmployeeForm from './EmployeeForm';
import { employeeUpdate } from '../actions';
import { Card, CardSection, Button } from './common';
class EmployeeEdit extends Component {
  componentWillMount() {
    _.each(this.props.navigation.state.params.employee, (value, prop) => {
      this.props.employeeUpdate({ prop, value });
    });
  }
  onButtonPress() {
    const { params } = this.props.navigation.state;
    const { name, phone, shift } = params.employee;
  }
  render() {
    return (
      <Card>
        <EmployeeForm {...this.props} />
        <CardSection>
          <Button onPress={() => this.onButtonPress.bind(this)}>
            Save Changes
          </Button>
        </CardSection>
      </Card>
    );
  }
}
const mapStateToProps = (state) => {
  const { name, phone, shift } = state.employeeForm;
  return { name, phone, shift };
};
export default connect(mapStateToProps, { employeeUpdate })(EmployeeEdit);

员工名单.js

import React, { Component } from 'react';
import { FlatList } from 'react-native';
import { connect } from 'react-redux';
//import { R } from 'ramda';
import _ from 'lodash';
import { employeesFetch } from '../actions';
import { HeaderButton } from './common';
import ListEmployee from './ListEmployee';

class EmployeeList extends Component {
  static navigationOptions = ({ navigation }) => ({
    headerRight: (
      <HeaderButton onPress={() => navigation.navigate('employeeCreate')}>
        Add
      </HeaderButton>
    )
  });
  componentWillMount() {
    this.props.employeesFetch();
  }
  keyExtractor(item) {
    return item.uid;
  }
  renderItem({ item }) {
    return <ListEmployee employee={item} navigation={this.props.navigation} />;
  }
  render() {
    return (
      <FlatList
      data={this.props.employees}
      renderItem={this.renderItem.bind(this)} // Only for test
      keyExtractor={this.keyExtractor}
      navigation={this.props.navigation}
      />
    );
  }
}
const mapStateToProps = (state) => {
  const employees = _.map(state.employees, (val, uid) => ({ ...val, uid }));
  return { employees };
};
export default connect(mapStateToProps, { employeesFetch })(EmployeeList);

列表员工.js

import React, { Component } from 'react';
import {
  Text,
  StyleSheet,
  TouchableWithoutFeedback,
  View
} from 'react-native';
import { CardSection } from './common';
class ListEmployee extends Component {
  render() {
  const { employee } = this.props;
  const { navigate } = this.props.navigation;
  const { textStyle } = styles;
  const { name } = this.props.employee;
    return (
      <TouchableWithoutFeedback onPress={() => navigate('employeeEdit', { employee })}>
        <View>
          <CardSection>
            <Text style={textStyle}>{name}</Text>
          </CardSection>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}
/**
 second argument in connect does 2 things. 1.  dispatches all actions creators
return action objects to the store to be used by reducers; 2. creates props
of action creators to be used by components
**/
export default ListEmployee;
const styles = StyleSheet.create({
  textStyle: {
    fontSize: 18,
    paddingLeft: 15,
  }
});

员工表格.js

import React, { Component } from 'react';
import { Picker, Text, StyleSheet, View } from 'react-native';
import { connect } from 'react-redux';
import { employeeUpdate } from '../actions';
import { CardSection, Input } from './common';
class EmployeeForm extends Component {
    render() {
        return (
        <View>
          <CardSection>
            <Input
              label="Name"
              placeholder="Jane"
              value={this.props.name}
              onChangeText={value => this.props.employeeUpdate({ prop: 'name', value })}
            />
          </CardSection>
          <CardSection>
          <Input
            label="Phone"
            placeholder="xxx-xxxx"
            value={this.props.phone}
            onChangeText={value => this.props.employeeUpdate({ prop: 'phone', value })}
          />
          </CardSection>
          <CardSection>
          <Text style={styles.pickerTextStyle}>Shift</Text>
          <Picker
            style={{ flex: 1 }}
            selectedValue={this.props.shift}
            onValueChange={value => this.props.employeeUpdate({ prop: 'shift', value })}
          >
            <Picker.Item label="Monday" value="Monday" />
            <Picker.Item label="Tuesday" value="Tuesday" />
            <Picker.Item label="Wednesday" value="Wednesday" />
            <Picker.Item label="Thursday" value="Thursday" />
            <Picker.Item label="Friday" value="Friday" />
            <Picker.Item label="Saturday" value="Saturday" />
            <Picker.Item label="Sunday" value="Sunday" />
          </Picker>
          </CardSection>
        </View>
      );
    }
  }
  const styles = StyleSheet.create({
    pickerTextStyle: {
      fontSize: 18,
      paddingLeft: 20
    }
  });
  const mapStateToProps = (state) => {
    const { name, phone, shift } = state.EmployeeForm;
    return { name, phone, shift };
  };
export default connect(mapStateToProps, { employeeUpdate })(EmployeeForm);

这是我的联合收割机减速机

import { combineReducers } from 'redux';
import AuthReducer from './AuthReducer';
import EmployeeFormReducer from './EmployeeFormReducer';
import EmployeeReducer from './EmployeeReducer';
import SelectionReducer from './SelectionReducer';
export default combineReducers({
    auth: AuthReducer,
    employeeForm: EmployeeFormReducer,
    employees: EmployeeReducer,
    selectedEmployeeId: SelectionReducer
  });

这是员工形式缩减器

import { EMPLOYEE_UPDATE, EMPLOYEE_CREATE } from '../actions/types';
const INITIAL_STATE = {
  // prop: 'name', value: ''
  name: '',
  phone: '',
  shift: ''
};
export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
      case EMPLOYEE_UPDATE:
// [] is NOT an array; a syntax to convert value into key; called key interpolation??
        return { ...state, [action.payload.prop]: action.payload.value };
      case EMPLOYEE_CREATE:
        return INITIAL_STATE;
      default:
        return state;
    }
};

这是动作创建者

export const employeeUpdate = ({ prop, value }) => {
  return {
    type: EMPLOYEE_UPDATE,
    payload: { prop, value }
  };
};

这是员工表格.js

import React, { Component } from 'react';
import { Picker, Text, StyleSheet, View } from 'react-native';
import { connect } from 'react-redux';
import { employeeUpdate } from '../actions';
import { CardSection, Input } from './common';
class EmployeeForm extends Component {
    render() {
        return (
        <View>
          <CardSection>
            <Input
              label="Name"
              placeholder="Jane"
              value={this.props.name}
              onChangeText={value => this.props.employeeUpdate({ prop: 'name', value })}
            />
          </CardSection>
          <CardSection>
          <Input
            label="Phone"
            placeholder="xxx-xxxx"
            value={this.props.phone}
            onChangeText={value => this.props.employeeUpdate({ prop: 'phone', value })}
          />
          </CardSection>
          <CardSection>
          <Text style={styles.pickerTextStyle}>Shift</Text>
          <Picker
            style={{ flex: 1 }}
            selectedValue={this.props.shift}
            onValueChange={value => this.props.employeeUpdate({ prop: 'shift', value })}
          >
            <Picker.Item label="Monday" value="Monday" />
            <Picker.Item label="Tuesday" value="Tuesday" />
            <Picker.Item label="Wednesday" value="Wednesday" />
            <Picker.Item label="Thursday" value="Thursday" />
            <Picker.Item label="Friday" value="Friday" />
            <Picker.Item label="Saturday" value="Saturday" />
            <Picker.Item label="Sunday" value="Sunday" />
          </Picker>
          </CardSection>
        </View>
      );
    }
  }
  const styles = StyleSheet.create({
    pickerTextStyle: {
      fontSize: 18,
      paddingLeft: 20
    }
  });
  const mapStateToProps = (state) => {
    const { name, phone, shift } = state.EmployeeForm;
    return { name, phone, shift };
  };
export default connect(mapStateToProps, { employeeUpdate })(EmployeeForm);

Answer 1

我认为

你的问题是你没有约束力。试试这个：

onButtonPress = () => {
    const { params } = this.props.navigation.state;
    const { name, phone, shift } = params.employee;
  }

Answer 2

问题是 EmployeeForm.js

;这是 EmployeeEdit.js 和 EmployeeForm.js 之间共享的常见组件。它从 2 个中的任何一个接收，但它不能有 mapStateToProps，因为它最终会覆盖其父级的 mapStateToProps，后者负责管理 redux 状态。所以我摆脱了它，组合化简器能够正确地将状态.key与其相应的值（即在其函数调用中声明的化简器）匹配。