#react-native #react-redux #react-hooks #react-state #react-effects
Вопрос:
Мой английский не очень хорош, я подготовил заявление. Я хочу использовать следующую структуру классов в качестве функции или константы. Как я могу это сделать? Я хочу использовать функциональный компонент для использования реквизита.
Я добавил весь код целиком. Приложение для расчета возраста.
Я использовал useState — useЭффект, это не увенчалось успехом.
в ожидании помощи я благодарю вас
import React from "react";
import {
StyleSheet,
Text,
View,
Dimensions,
Platform,
TouchableOpacity,
} from "react-native";
import DateTimePicker from "react-native-modal-datetime-picker";
const { height } = Dimensions.get("window");
export default class App extends React.Component {
state = {
isDateTimePickerVisible: false,
date: undefined,
};
_showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });
_hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });
_handleDatePicked = (date) => {
date = new Date(date);
this.setState({ date: date }, () => {
this._hideDateTimePicker();
this._calculateTheDifference();
});
};
_calculateTheDifference() {
if (!this.state.date) {
return;
}
let current_date = new Date().getDate();
let current_month = new Date().getMonth();
let current_year = new Date().getFullYear();
let birth_date = this.state.date.getDate();
let birth_month = this.state.date.getMonth();
let birth_year = this.state.date.getFullYear();
let month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (birth_date > current_date) {
current_month = current_month - 1;
current_date = current_date month[birth_month - 1];
}
if (birth_month > current_month) {
current_year = current_year - 1;
current_month = current_month 12;
}
let calculated_date = current_date - birth_date;
let calculated_month = current_month - birth_month;
let calculated_year = current_year - birth_year;
if (calculated_date || calculated_month || calculated_year)
this.setState({
calculated_date: calculated_date,
calculated_month: calculated_month,
calculated_year: calculated_year,
dateOpacity: 1,
});
}
render() {
return (
<View style={styles.container}>
<View style={styles.slider}>
<View style={{ justifyContent: "center", alignItems: "center" }}>
<Text style={styles.yasHesaplama}>Age Calculate</Text>
</View>
</View>
<View style={{ flex: 1, backgroundColor: "#fff" }}>
<View style={styles.solKose} />
<View
style={{
flex: 1,
backgroundColor: "#fff",
borderTopLeftRadius: 65,
}}
/>
</View>
<View style={styles.anaGovde}>
<TouchableOpacity
style={styles.touchableOpacity}
onPress={this._showDateTimePicker}
>
<Text style={styles.dogumGunu}>Enter your birthday.</Text>
</TouchableOpacity>
<View style={[styles.viewText, { padding: 10 }]}>
<Text style={styles.text}>
{this.state.calculated_year}
{" Year"}{" "}
</Text>
<Text style={styles.text}>
{this.state.calculated_month}
{" Month"}{" "}
</Text>
<Text style={styles.text}>
{this.state.calculated_date}
{" Date"}{" "}
</Text>
</View>
</View>
<DateTimePicker
isVisible={this.state.isDateTimePickerVisible}
onConfirm={this._handleDatePicked}
onCancel={this._hideDateTimePicker}
mode={"date"}
maximumDate={new Date()}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
slider: {
...Platform.select({
ios: {
height: 0.3 * height,
backgroundColor: "#C12699",
borderBottomRightRadius: 65,
},
android: {
height: 0.3 * height,
backgroundColor: "#009A88",
borderBottomRightRadius: 65,
},
}),
},
text: {
paddingHorizontal: 5,
justifyContent: "center",
alignItems: "center",
fontSize: 30,
fontWeight: "bold",
color: "#fff",
},
viewText: {
...Platform.select({
ios: {
height: 150,
width: Dimensions.get("window").height / 2.6,
flexDirection: "row",
backgroundColor: "#C12699",
justifyContent: "center",
alignItems: "center",
borderRadius: 10,
},
android: {
height: 120,
width: Dimensions.get("window").height / 2,
flexDirection: "row",
backgroundColor: "#009A88",
justifyContent: "center",
alignItems: "center",
borderRadius: 10,
top: 40,
},
}),
},
dogumGunu: {
...Platform.select({
ios: {
fontSize: 20,
color: "#fff",
fontWeight: "bold",
borderWidth: 2,
borderColor: "#fff",
borderRadius: 10,
padding: 20,
},
android: {
fontSize: 20,
color: "#fff",
fontWeight: "bold",
borderWidth: 2,
borderColor: "#fff",
borderRadius: 10,
padding: 10,
},
}),
},
yasHesaplama: {
...Platform.select({
ios: {
top: 100,
fontSize: 40,
color: "#fff",
fontWeight: "bold",
borderWidth: 2,
borderColor: "#fff",
borderRadius: 10,
padding: 20,
},
android: {
top: 50,
fontSize: 35,
color: "#fff",
fontWeight: "bold",
borderWidth: 2,
borderColor: "#fff",
borderRadius: 10,
padding: 10,
},
}),
},
touchableOpacity: {
...Platform.select({
ios: {
height: 100,
width: Dimensions.get("window").height / 3,
backgroundColor: "#C12699",
alignItems: "center",
justifyContent: "center",
borderRadius: 10,
},
android: {
height: 80,
width: Dimensions.get("window").height / 2.3,
backgroundColor: "#009A88",
alignItems: "center",
justifyContent: "center",
borderRadius: 10,
},
}),
},
anaGovde: {
...Platform.select({
ios: {
flex: 1,
justifyContent: "space-between",
alignItems: "center",
bottom: 210,
},
android: {
flex: 1,
justifyContent: "space-between",
alignItems: "center",
bottom: 150,
},
}),
},
solKose: {
...Platform.select({
ios: {
...StyleSheet.absoluteFillObject,
backgroundColor: "#C12699",
},
android: {
...StyleSheet.absoluteFillObject,
backgroundColor: "#009A88",
},
}),
},
});
Ответ №1:
Я переписал ваш код для функционального программирования с помощью крючков React , также я протестировал его в эмуляторе Android, и он работает тщательно. Вы можете увидеть ниже пример вывода проекта:
И код проекта:
import React from "react";
import {
StyleSheet,
Text,
View,
Dimensions,
Platform,
TouchableOpacity,
} from "react-native";
import DateTimePicker from "react-native-modal-datetime-picker";
const { height } = Dimensions.get("window");
const App = ()=> {
const [states , setStates] = React.useState({
calculated_date: undefined,
calculated_month: undefined,
calculated_year: undefined,
dateOpacity: undefined
});
const [isDateTimePickerVisible , setIsDateTimePickerVisible] = React.useState(false);
const [date , setDate] = React.useState(undefined);
const _showDateTimePicker = () => setIsDateTimePickerVisible(true);
const _hideDateTimePicker = () => setIsDateTimePickerVisible(false);
const _handleDatePicked = (date)=> {
date = new Date(date);
return setDate(date);
};
const _calculateTheDifference = () => {
if (!date) {
return;
}
const currentDate = new Date();
let current_date = currentDate.getDate();
let current_month = currentDate.getMonth();
let current_year = currentDate.getFullYear();
let birth_date = date.getDate();
let birth_month = date.getMonth();
let birth_year = date.getFullYear();
let month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (birth_date > current_date) {
current_month = current_month - 1;
current_date = current_date month[birth_month - 1];
}
if (birth_month > current_month) {
current_year = current_year - 1;
current_month = current_month 12;
}
let calculated_date = current_date - birth_date;
let calculated_month = current_month - birth_month;
let calculated_year = current_year - birth_year;
if (calculated_date || calculated_month || calculated_year)
setStates({
...states,
calculated_date,
calculated_month,
calculated_year,
dateOpacity: 1,
});
};
React.useEffect(()=>{
if (date){
console.log("Selected Date:" , date);
_hideDateTimePicker();
_calculateTheDifference();
};
} , [date]);
return (
<View style={styles.container}>
<View style={styles.slider}>
<View style={{ justifyContent: "center", alignItems: "center" }}>
<Text style={styles.yasHesaplama}>Age Calculate</Text>
</View>
</View>
<View style={{ flex: 1, backgroundColor: "#fff" }}>
<View style={styles.solKose} />
<View
style={{
flex: 1,
backgroundColor: "#fff",
borderTopLeftRadius: 65,
}}
/>
</View>
<View style={styles.anaGovde}>
<TouchableOpacity
style={styles.touchableOpacity}
onPress={_showDateTimePicker}
>
<Text style={styles.dogumGunu}>Enter your birthday.</Text>
</TouchableOpacity>
<View style={[styles.viewText, { padding: 10 }]}>
<Text style={styles.text}>
{states.calculated_year}
{" Year"}{" "}
</Text>
<Text style={styles.text}>
{states.calculated_month}
{" Month"}{" "}
</Text>
<Text style={styles.text}>
{states.calculated_date}
{" Date"}{" "}
</Text>
</View>
</View>
<DateTimePicker
isVisible={isDateTimePickerVisible}
onConfirm={_handleDatePicked}
onCancel={_hideDateTimePicker}
mode={"date"}
maximumDate={new Date()}
/>
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
slider: {
...Platform.select({
ios: {
height: 0.3 * height,
backgroundColor: "#C12699",
borderBottomRightRadius: 65,
},
android: {
height: 0.3 * height,
backgroundColor: "#009A88",
borderBottomRightRadius: 65,
},
}),
},
text: {
paddingHorizontal: 5,
justifyContent: "center",
alignItems: "center",
fontSize: 30,
fontWeight: "bold",
color: "#fff",
},
viewText: {
...Platform.select({
ios: {
height: 150,
width: Dimensions.get("window").height / 2.6,
flexDirection: "row",
backgroundColor: "#C12699",
justifyContent: "center",
alignItems: "center",
borderRadius: 10,
},
android: {
height: 120,
width: Dimensions.get("window").height / 2,
flexDirection: "row",
backgroundColor: "#009A88",
justifyContent: "center",
alignItems: "center",
borderRadius: 10,
top: 40,
},
}),
},
dogumGunu: {
...Platform.select({
ios: {
fontSize: 20,
color: "#fff",
fontWeight: "bold",
borderWidth: 2,
borderColor: "#fff",
borderRadius: 10,
padding: 20,
},
android: {
fontSize: 20,
color: "#fff",
fontWeight: "bold",
borderWidth: 2,
borderColor: "#fff",
borderRadius: 10,
padding: 10,
},
}),
},
yasHesaplama: {
...Platform.select({
ios: {
top: 100,
fontSize: 40,
color: "#fff",
fontWeight: "bold",
borderWidth: 2,
borderColor: "#fff",
borderRadius: 10,
padding: 20,
},
android: {
top: 50,
fontSize: 35,
color: "#fff",
fontWeight: "bold",
borderWidth: 2,
borderColor: "#fff",
borderRadius: 10,
padding: 10,
},
}),
},
touchableOpacity: {
...Platform.select({
ios: {
height: 100,
width: Dimensions.get("window").height / 3,
backgroundColor: "#C12699",
alignItems: "center",
justifyContent: "center",
borderRadius: 10,
},
android: {
height: 80,
width: Dimensions.get("window").height / 2.3,
backgroundColor: "#009A88",
alignItems: "center",
justifyContent: "center",
borderRadius: 10,
},
}),
},
anaGovde: {
...Platform.select({
ios: {
flex: 1,
justifyContent: "space-between",
alignItems: "center",
bottom: 210,
},
android: {
flex: 1,
justifyContent: "space-between",
alignItems: "center",
bottom: 150,
},
}),
},
solKose: {
...Platform.select({
ios: {
...StyleSheet.absoluteFillObject,
backgroundColor: "#C12699",
},
android: {
...StyleSheet.absoluteFillObject,
backgroundColor: "#009A88",
},
}),
},
});
Комментарии:
1. У вас нет ответа?
2. Если у вас небольшой проект ,поделитесь всеми своими кодами , если это невозможно, поделитесь соответствующим кодом с текущим компонентом, возможно, я смогу вам помочь.
3. Я добавил весь приведенный выше код. Тема: 1 @MHP
4. @kikirim в предыдущие дни я был занят своим проектом и не мог ответить вам , надеюсь , если ваша проблема не будет решена, это поможет вам. удачи!
5. Огромное спасибо. ты потрясающая 🙂 @MHP
Ответ №2:
Это будет выглядеть примерно так
import React from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
export default function Rewards(props) {
const [state, setState] = React.useState({
isDateTimePickerVisible: false,
date: undefined,
millSecLeft: 0,
dateOpacity: 1,
});
console.log(props); // Your props here
const _showDateTimePicker = () =>
setState({ ...state, isDateTimePickerVisible: true });
const _hideDateTimePicker = () =>
setState({ ...state, isDateTimePickerVisible: false });
const _handleDatePicked = (date) => {
date = new Date(date);
setState({ date: date }, () => {
_hideDateTimePicker();
_calculateTheDifference();
});
};
const _calculateTheDifference = () => {
if (!state.date) {
return;
}
let current_date = new Date().getDate();
let current_month = new Date().getMonth();
let current_year = new Date().getFullYear();
let birth_date = state.date.getDate();
let birth_month = state.date.getMonth();
let birth_year = state.date.getFullYear();
let month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (birth_date > current_date) {
current_month = current_month - 1;
current_date = current_date month[birth_month - 1];
}
if (birth_month > current_month) {
current_year = current_year - 1;
current_month = current_month 12;
}
let calculated_date = current_date - birth_date;
let calculated_month = current_month - birth_month;
let calculated_year = current_year - birth_year;
if (calculated_date || calculated_month || calculated_year)
setState({
...state,
calculated_date: calculated_date,
calculated_month: calculated_month,
calculated_year: calculated_year,
dateOpacity: 1,
});
};
return <View>{/*Code here*/}</View>;
}
Комментарии:
1. Спасибо за помощь, я добавил все коды, у вас не получилось с кодами.
2. Предупреждение об ошибке: Обновления состояния от useState() и useReducer() Крючки не поддерживают второй аргумент обратного вызова. Чтобы выполнить побочный эффект после рендеринга, объявите его в теле компонента с помощью функции useEffect().
Ответ №3:
Вы не сможете передать функцию обратного вызова в качестве второго аргумента в setState в крючках react ( это работает только с компонентами класса) , поэтому вместо этого вы можете использовать useEffect и управлять жизненным циклом приложения. Для этого случая вы можете следовать этому:
React.useEffect(()=> {
if ( state.date ){
_hideDateTimePicker();
_calculateTheDifference();
};
} , [state])
А также вам нужно изменить _handleDatePicked на :
const _handleDatePicked = (date) => {
date = new Date(date);
setState({
...state,
date: date
});
};
Ответ №4:
исправление было сделано, но оно не работает.
function Rewards({ appTheme }) {
const [state, setState] = useState({
isDateTimePickerVisible: false,
date: undefined,
});
const _showDateTimePicker = () =>
setState({ ...state, isDateTimePickerVisible: true });
const _hideDateTimePicker = () =>
setState({ ...state, isDateTimePickerVisible: false });
useEffect(() => {
if (state.date) {
_hideDateTimePicker();
_calculateTheDifference();
}
}, [state]);
const _handleDatePicked = (date) => {
date = new Date(date);
setState({
...state,
date: date,
});
};
const _calculateTheDifference = () => {
if (!state.date) {
return;
}
let current_date = new Date().getDate();
let current_month = new Date().getMonth();
let current_year = new Date().getFullYear();
let birth_date = state.date.getDate();
let birth_month = state.date.getMonth();
let birth_year = state.date.getFullYear();
let month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (birth_date > current_date) {
current_month = current_month - 1;
current_date = current_date month[birth_month - 1];
}
if (birth_month > current_month) {
current_year = current_year - 1;
current_month = current_month 12;
}
let calculated_date = current_date - birth_date;
let calculated_month = current_month - birth_month;
let calculated_year = current_year - birth_year;
if (calculated_date || calculated_month || calculated_year)
setState({
...state,
calculated_date: calculated_date,
calculated_month: calculated_month,
calculated_year: calculated_year,
dateOpacity: 1,
});
};
return (
<View style={styles.container}>
<HeaderBarYas />
<FlatList
style={{
marginTop: -25,
borderTopLeftRadius: SIZES.radius * 2,
borderTopRightRadius: SIZES.radius * 2,
backgroundColor: COLORS.lightGray3,
}}
/>
<View style={styles.anaGovde}>
<TouchableOpacity
style={styles.touchableOpacity}
onPress={_showDateTimePicker}
>
<Text style={styles.dogumGunu}>Doğum Gününü Giriniz</Text>
</TouchableOpacity>
<View style={[styles.viewText, { padding: 10 }]}>
<Text style={styles.text}>
{state.calculated_year}
{" Yıl"}{" "}
</Text>
<Text style={styles.text}>
{state.calculated_month}
{" Ay"}{" "}
</Text>
<Text style={styles.text}>
{state.calculated_date}
{" Gün"}{" "}
</Text>
</View>
</View>
<DateTimePicker
isVisible={state.isDateTimePickerVisible}
onConfirm={_handleDatePicked}
onCancel={_hideDateTimePicker}
mode={"date"}
locale="tr_TR"
maximumDate={new Date()}
/>
</View>
);
}
Комментарии:
1. На самом деле ваш общий снимок экрана показывает ,что функция обратного вызова в качестве второго аргумента вызывает ошибку , поэтому вы получаете ту же ошибку в текущем компоненте после применения изменений или ошибка для другого компонента ?
2. Предупреждение: Превышена максимальная глубина обновления. Это может произойти, когда компонент вызывает setState внутри useEffect, но у useEffect либо нет массива зависимостей, либо одна из зависимостей изменяется при каждом рендеринге.
3. Это означает, что ваше состояние обновления бесконечно! Другими словами , в цикле бесконечности я предлагаю вам отделить «дату» от других состояний, создать состояние отдельно для этого и установить его в зависимости useEffect.
4. Как мне это сделать, я не знаю, можете ли вы помочь.
5. Теперь я вижу , что ваш код более точен, вы допустили ошибку в эффекте использования, вы используете _handleDatePicked вместо _hideDateTimePicker , и это вызывает бесконечный цикл.