>

문서별로 반응 네이티브 모달 날짜 시간 선택기를 사용하고 있습니다. 날짜 (handleStartDatePicked 함수 내의 콘솔 로그에 표시됨)를 this.state.startDateTime으로 저장하려고합니다. React의 setState를 사용 하여이 작업을 시도하고 있지만 작동하지 않습니다. 호기심으로 다른 속성 (아래 예제 'startDateTimeNew'에서)을 변경하려고 시도했으며 이것이 올바르게 업데이트되고 있습니다. 의도 한 변수 'startDateTime'이 업데이트되지 않는 이유에 대해 잘 모르겠습니다.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';
import moment from 'moment';
class SessionScreen extends Component {
  static navigationOptions = {
    title: 'View Session',
  };
  state = {
    details: '',
    endDateTime: '',
    endDateTimePickerVisible: false,
    startDateTime: '',
    startDateTimePickerVisible: false,
  };
  handleEndDatePicked = (date) => {
    console.log('A date has been picked: ', date);
    this.hideEndDateTimePicker();
  };
  handleInputChangeFor = (propertyName,text) => {
    this.setState({
        ...this.state,
        [propertyName]: text,
    });
    console.log('this.state:',this.state);
  }
  handleStartDatePicked = (date) => {
    console.log('A date has been picked: ', date, 'formatted:', moment(date).format('dddd[,] MMM Do h:mm A'));
    this.setState({
        ...this.state,
        startDateTimeNew: date.toString(),
        startDateTime: date.toString(),
    }, function() {
        console.log('new state',this.state);
    });
    console.log('this.state:', this.state);
    this.hideStartDateTimePicker();
  };
  hideEndDateTimePicker = () => this.setState({ ...this.state, endDateTimePickerVisible: false });
  hideStartDateTimePicker = () => this.setState({ ...this.state, startDateTimePickerVisible: false });
  showEndDateTimePicker = () => this.setState({ ...this.state, endDateTimePickerVisible: true });
  showStartDateTimePicker = () => this.setState({ ...this.state, startDateTimePickerVisible: true });
  render() {
    const {navigate} = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text style={styles.header}>START TIME</Text>
        <TouchableOpacity onPress={this.showStartDateTimePicker} style={styles.touchableOpacity}>
          {/* <Text style={styles.touchableOpacityText}><this.dateTimeStart /></Text> */}
          <Text style={styles.touchableOpacityText}>Click to set start day and time</Text>
        </TouchableOpacity>
        <Text style={styles.header}>END TIME</Text>
        <TextInput 
            style={styles.input}
            placeholder="Click to add end day and time..."
            returnKeyType="go"
            autoCapitalize="none"
            autoCorrect={false}
            onChangeText={(input) => this.handleInputChangeFor('end',input)}
        />
        <Text style={styles.header}>DETAILS</Text>
        <TextInput 
            style={styles.input}
            placeholder="Enter details about this chill..."
            returnKeyType="go"
            autoCapitalize="none"
            autoCorrect={false}
            onChangeText={(input) => this.handleInputChangeFor('details',input)}
        />
        <DateTimePicker
          isVisible={this.state.startDateTimePickerVisible}
          onConfirm={this.handleStartDatePicked}
          onCancel={this.hideStartDateTimePicker}
          mode={'datetime'}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#b2f6ff',
    padding: 10
  },
  header: {
    fontSize: 14,
    marginBottom: 8,
    color: 'black',
    opacity: 0.8,
  },
  input: {
    height: 40,
    backgroundColor: 'white',
    marginBottom: 10,
    paddingHorizontal: 10,
    width: 'auto'
  },
  touchableOpacity: {
    height: 40,
    backgroundColor: 'white',
    marginBottom: 10,
    paddingHorizontal: 10,
    width: 'auto',
    justifyContent: 'center',
  },
  touchableOpacityText: {
    opacity: 0.5
  }
})
const mapReduxStateToProps = reduxState => (
  {reduxState}
);
export default connect(mapReduxStateToProps)(SessionScreen);

date.toString ()과 moment (date) .format ( 'dddd [,] MMM Do h : mm A'를 사용하여 startDateTime 설정을 시도했습니다. 함수에 입력 한 날짜는 객체이지만 성공적으로 올바른 데이터가 포함 된 문자열로 바뀝니다.


  • 답변 # 1

    여전히 내 질문에서 코드로 작성된대로 setState가 작동하지 않는 이유를 아직 결정하지 못했지만 (특히 해당 설정이 파일의 다른 곳에서 작동하기 때문에) state를 설정하여 해결 방법을 찾을 수있었습니다. 다음과 같은 방법으로

    let newState = this.state;
    newState.startDateTime = date.toString();
    this.setState(newState, function() {
        console.log('new state',this.state);
    });
    
    

    내 질문에있는 코드가 왜 성공하지 못한 지에 대한 설명을 환영합니다.

관련 자료

  • 이전 sml - 표준 ML에서 Word64에 대한 다형성 강제
  • 다음 javascript - NodeJS는 child_processspawn에서 명령을 실행하기 위해 폴더로 이동할 수 없습니다