홈>
문서별로 반응 네이티브 모달 날짜 시간 선택기를 사용하고 있습니다. 날짜 (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
관련 자료
- javascript - thissetState로 네이티브 업데이트 상태 반응
- reactjs - 컴포넌트가 렌더링 된 후 로컬 상태 업데이트
- reactjs - React에서 배열 상태 업데이트
- reactjs - 상태를 업데이트하지 않는 맞춤 드롭 다운 반응
- javascript - React의 불변 상태에서 배열에 항목을 추가하려면 어떻게합니까?
- reactjs - React의 PureComponent가`setState`를 사용할 수 있습니까?
- reactjs - setState 후크가 업데이트되지 않음
- javascript - 비동기 대기 호출 후 반응 상태가 업데이트되지 않음
- reactjs - 반응 setState가 상태를 덮어 씁니다
- vue.js - Vuex는 오디오를 실시간으로 업데이트합니다
- reactjs - 반응 컨텍스트에서 setState가 업데이트되지 않는 문제를 해결하는 방법
- javascript - 불변으로 반응하여 중첩 상태 업데이트
- angular - ngrx - 상태 변경 후보기가 업데이트되지 않음
- javascript - 반응 상태 - 중첩 배열에서 객체의 속성 업데이트
- reactjs - React Native 및 Hooks를 사용할 때 Jest 테스트 중에 상태가 업데이트되지 않음
- reactjs - 리듀서가 호출되었지만 Redux 상태가 업데이트되지 않음
- reactjs - 반응 상태를 2D 배열로 업데이트 하시겠습니까?
- reactjs - Axios 요청 후 상태 업데이트 자체 반응?
- javascript - 입력 요소를 입력 할 때 상태가 업데이트되지 않습니다
- reactjs - 반응 테이블과 함께 반영되지 않는 componentDidMount의 상태 속성 업데이트
관련 질문
- reactjs : React Native -기능 구성 요소를 사용하여 루프에 있을 때 UI 업데이트
- reactjs : 반응 네이티브에서 어두운 테마와 밝은 테마 사이를 전환하는 간단한 스위치 토글을 만드는 방법
- javascript : 처리되지 않은 약속 거부: 오류: 데이터베이스 테이블 오류: 반응 네이티브에서 정의되지 않음
- reactjs : 카드 루프를 수행하는 방법
- javascript : 경고 해결 방법 이전 상태를 참조할 때 setState에서 콜백 사용
- ios : 내 기본 React 네이티브 앱은 종속성으로 인해 계속 중단됩니다.
- reactjs : 반응 네이티브에서 Firestore 데이터를 어떻게 사용할 수 있습니까?
- javascript : 다른 화면의 해당 데이터베이스에서 데이터를 가져오기 전에 한 화면의 데이터베이스에 데이터가 추가될 때까지 어떻게 기다릴 수 있습니까? (리액트 네이티브, 파이어베이스)
- reactjs : 반응 네이티브에 잘못된 ionicon이 표시됨
- javascript : TypeError: setEmail은 함수가 아닙니다. ('setEmail(input)'에서 'setEmail'은 정의되지 않음) (컨텍스트 API로 후크를 사용할 수 없음)
여전히 내 질문에서 코드로 작성된대로 setState가 작동하지 않는 이유를 아직 결정하지 못했지만 (특히 해당 설정이 파일의 다른 곳에서 작동하기 때문에) state를 설정하여 해결 방법을 찾을 수있었습니다. 다음과 같은 방법으로
내 질문에있는 코드가 왜 성공하지 못한 지에 대한 설명을 환영합니다.