REACT NATIVE PICKER — TypeError: undefined не является объектом (оценка «_this.updateMonth»)

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { YearPicker, MonthPicker, DayPicker } from 'react-dropdown-date';
import { StyleSheet, Image, View, Text, ScrollView, TextInput, Picker, TouchableOpacity } from 'react-native';

const TextAndInput = ({ text, placeholder, onChange }) => {
  return (
    <View style={styles.textInputContainer}>
      <Text style={styles.inputLabel}>{text}</Text>
      <TextInput onChangeText={ onChange } placeholder={placeholder} style={styles.input}/>
    </View>
  );
}
const MonthPickInput = ({ text, onChange }) => {
  return (
    <View style={styles.textInputContainer}>
      <Text style={styles.inputLabel}>{text}</Text>
      <Picker itemStyle={styles.pickerItem} onValueChange={onChange} mode="dialog" style={styles.picker}>
        <Picker.Item label="January" value={1} />
        <Picker.Item label="February" value={2} />
        <Picker.Item label="March" value={3} />
        <Picker.Item label="April" value={4} />
        <Picker.Item label="May" value={5} />
        <Picker.Item label="June" value={6} />
        <Picker.Item label="July" value={7}/>
        <Picker.Item label="August" value={8} />
        <Picker.Item label="September" value={9} />
        <Picker.Item label="October" value={1} />
        <Picker.Item label="November" value={2} />
        <Picker.Item label="December" value={3} />
      </Picker>
    </View>
  )
}
const DayPickInput = ({ text, onChange }) => {
  return (
    <View style={styles.textInputContainer}>
      <Text style={styles.inputLabel}>{text}</Text>
      <Picker itemStyle={styles.pickerItem} onValueChange={onChange} mode="dialog" style={styles.picker}>
        <Picker.Item label="1" value={1}/>
        <Picker.Item label="2" value={2}/>
        <Picker.Item label="3" value={3}/>
        <Picker.Item label="4" value={4}/>
        <Picker.Item label="5" value={5}/>
        <Picker.Item label="6" value={6}/>
        <Picker.Item label="7" value={7}/>
        <Picker.Item label="8" value={8}/>
        <Picker.Item label="9" value={9}/>
        <Picker.Item label="10" value={1}/>
        <Picker.Item label="11" value={2}/>
        <Picker.Item label="12" value={3}/>
        <Picker.Item label="13" value={4}/>
        <Picker.Item label="14" value={5}/>
        <Picker.Item label="15" value={6}/>
        <Picker.Item label="16" value={7}/>
        <Picker.Item label="17" value={8}/>
        <Picker.Item label="18" value={9}/>
        <Picker.Item label="19" value={1}/>
        <Picker.Item label="20" value={2}/>
        <Picker.Item label="21" value={3}/>
        <Picker.Item label="22" value={4}/>
        <Picker.Item label="23" value={5}/>
        <Picker.Item label="24" value={6}/>
        <Picker.Item label="25" value={7}/>
        <Picker.Item label="26" value={8}/>
        <Picker.Item label="27" value={9}/>
        <Picker.Item label="28" value={1}/>
        <Picker.Item label="29" value={2}/>
        <Picker.Item label="30" value={3}/>
        <Picker.Item label="31" value={4}/>
      </Picker>
    </View>
  )
}
const YearPickInput = ({ text, onChange }) => {
  return (
    <View style={styles.textInputContainer}>
      <Text style={styles.inputLabel}>{text}</Text>
      <Picker itemStyle={styles.pickerItem} onValueChange={onChange} mode="dialog" style={styles.picker}>
        <Picker.Item label="2020" value={4} />
        <Picker.Item label="2019" value={3} />
        <Picker.Item label="2018" value={2} />
        <Picker.Item label="2017" value={1} />
        <Picker.Item label="2016" value={9} />
        <Picker.Item label="2015" value={8} />
        <Picker.Item label="2014" value={7} />
        <Picker.Item label="2013" value={6} />
        <Picker.Item label="2012" value={5} />
        <Picker.Item label="2011" value={4} />
        <Picker.Item label="2010" value={3} />
        <Picker.Item label="2009" value={2} />
        <Picker.Item label="2008" value={1} />
        <Picker.Item label="2007" value={9} />
        <Picker.Item label="2006" value={8} />
        <Picker.Item label="2005" value={7} />
        <Picker.Item label="2004" value={6} />
        <Picker.Item label="2003" value={5} />
        <Picker.Item label="2002" value={4} />
        <Picker.Item label="2001" value={3} />
        <Picker.Item label="2000" value={2} />
        <Picker.Item label="1999" value={1} />
        <Picker.Item label="1998" value={9} />
        <Picker.Item label="1997" value={8} />
        <Picker.Item label="1996" value={7} />
        <Picker.Item label="1995" value={6} />
        <Picker.Item label="1994" value={5} />
        <Picker.Item label="1993" value={4} />
        <Picker.Item label="1992" value={3} />
        <Picker.Item label="1991" value={2} />
        <Picker.Item label="1990" value={1} />
        <Picker.Item label="1989" value={9} />
        <Picker.Item label="1988" value={8} />
        <Picker.Item label="1987" value={7} />
        <Picker.Item label="1986" value={6} />
        <Picker.Item label="1985" value={5} />
        <Picker.Item label="1984" value={4} />
        <Picker.Item label="1983" value={3} />
        <Picker.Item label="1982" value={2} />
        <Picker.Item label="1981" value={1} />
        <Picker.Item label="1980" value={9} />
        <Picker.Item label="1979" value={8} />
        <Picker.Item label="1978" value={7} />
        <Picker.Item label="1977" value={6} />
        <Picker.Item label="1976" value={5} />
        <Picker.Item label="1975" value={4} />
        <Picker.Item label="1974" value={3} />
        <Picker.Item label="1973" value={2} />
        <Picker.Item label="1972" value={1} />
        <Picker.Item label="1971" value={9} />
        <Picker.Item label="1970" value={1} />
        <Picker.Item label="1969" value={2} />
        <Picker.Item label="1968" value={3} />
        <Picker.Item label="1967" value={4} />
        <Picker.Item label="1966" value={5} />
        <Picker.Item label="1965" value={6} />
        <Picker.Item label="1964" value={7} />
        <Picker.Item label="1963" value={8} />
        <Picker.Item label="1962" value={9} />
        <Picker.Item label="1961" value={1} />
        <Picker.Item label="1960" value={2} />
        <Picker.Item label="1959" value={3} />
        <Picker.Item label="1958" value={4} />
        <Picker.Item label="1957" value={5} />
        <Picker.Item label="1956" value={6} />
        <Picker.Item label="1955" value={7} />
        <Picker.Item label="1954" value={8} />
        <Picker.Item label="1953" value={9} />
        <Picker.Item label="1952" value={1} />
        <Picker.Item label="1951" value={2} />
        <Picker.Item label="1950" value={3} />
      </Picker>
    </View>
  )
}
const RegisterButton = ({title, color, onPress, width }) => {
  return (
    <View style={{ flex: 1}}>
      <TouchableOpacity onPress = { onPress } style = {styles.registerButton}>
        <Text style = {styles.registerButtonText} > { title } </Text>
      </TouchableOpacity>
    </View>
  );
}

function Register({ changePage }) {
  const [ username, updateUsername ] = useState('');
  const [ password, updatePassword ] = useState('');
  const [ firstName, updateFirstName ] = useState('');
  const [ lastName, updateLastName ] = useState('');
  const [ month, updateMonth ] = useState('');
  const [ day, updateDay ] = useState('');
  const [ year, updateYear ] = useState('');

    return (
      <ScrollView style={styles.container}>
      <TextAndInput text="Create a username. This is the name that others will see you as publicly." placeholder="Username" onChange={() => updateUsername(username)} />
      <TextAndInput text="Create a secure password." placeholder="Password" onChange={() => updatePassword(password)} />
      <TextAndInput text="Enter your first name. This will help calculate your numerology. This name will not be shown publicly." placeholder="First Name" onChange={() => updateFirstName(firstName)} />
      <TextAndInput text="Enter your last name. This will help calculate your numerology. This name will not be shown publicly." placeholder="Last Name" onChange={() => updateLastName(lastName)} />
      <MonthPickInput text="Enter the month that you were born." onChange={() => this.updateMonth(v)} />
      <DayPickInput text="Enter the day that you were born." onChange={() => this.updateDay()} />
      <YearPickInput text="Enter the year that you were born." onChange={() => this.updateYear()} />
      <RegisterButton onPress = {() => changePage("account") } title="Register" />
      </ScrollView>
    )
};

export default Register;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    paddingVertical: 15,
    paddingHorizontal: 30
  },
  textInputContainer: {
    flex: 1,
    marginVertical: 10,
  },
  input: {
    height: 50,
    flex: 1,
    flexShrink: 0,
    paddingHorizontal: 20,
    marginHorizontal: 10,
    color: 'black',
    marginVertical: 10,
    alignItems: 'center',
    backgroundColor: '#eee',
    justifyContent: 'center',
    fontSize: 20,
    borderRadius: 50
  },
  inputLabel: {
    fontSize: 16,
    paddingHorizontal: 20
  },
  registerButton: {
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'black',
    borderRadius: 50,
    marginVertical: 50,
    marginHorizontal: 30
  },
  registerButtonText: {
    fontSize: 20,
    color: "white",
  },
  picker: {
    marginVertical: 10,
    marginHorizontal: 30,
  },
  pickerItem: {
    fontSize: 20,
    paddingHorizontal: 20,
    height: 50,
  }
});

Когда я выбираю элемент из компонента Picker, я получаю

TypeError: undefined не является объектом (оценка '_this.updatedMonth')

Это сообщение об ошибке будет применяться ко всем визуализированным компонентам выбора.

Это проблема с тем, как инициализируются мои состояния? Это проблема со значениями Picker.Items, являющимися целыми числами? Это ошибка с тем, как функция передается компоненту?

Может ли кто-нибудь помочь мне понять, почему я получаю эту ошибку, чтобы я знал, как правильно это сделать в будущем.

Спасибо.


person CHRIS EKE    schedule 27.06.2020    source источник


Ответы (1)


Попробуйте получить аргументы от вашего callbackMethod, как показано ниже.

   <MonthPickInput text="Enter the month that you were born." onChange={(v) => 
    this.updateMonth(v)} />

Вы передаете аргумент 'v' в this.updatemonth(v), так что это должно быть динамическое значение из вышеприведенного обратного вызова, которое onChange, как я писал выше.

person Rishabh Bhardwaj    schedule 27.06.2020