На самом деле я новичок в React Native. В моем недавнем проекте я столкнулся с проблемой при использовании хука useMutation для обновления данных на моем сервере. Я прикрепил файл, в котором я его использую.
Для справки прикрепил скриншот детской площадки.
Примечание: - Я не получаю сообщения об ошибке, и значения не обновляются на сервере. Если я нажму на кнопку. Не требуется повторно загружать его и отображать информацию с помощью запроса, достаточно просто обновления.
Структура мутации:
.
Запрос graphql отправлен:
import React, { Component,useState } from 'react';
import { View, Text, StyleSheet, Dimensions,ScrollView,AsyncStorage,TouchableHighlight,Alert,KeyboardAvoidingView} from 'react-native';
import TopHeader from '../../Header/TopHeader';
import { gql } from 'apollo-boost';
import Input from '../../SignIn/Input';
import { ScreenLoader } from '../../Loader';
import { useMutation } from '@apollo/react-hooks';
export const UPDATE_USER_DETAILS = gql`
mutation UpdateUser($input: AccountInput!){
accountUpdate(input: $input){
accountErrors{
message
}
user{
id
email
firstName
lastName
}
}
}
`;
const getToken = async () => {
const token = await AsyncStorage.getItem('token');
console.log("Token = "+token);
return token;
}
function UpdateUserComponent({ firstname,lastname }) {
const [newfirstName, setNewfirstName] = useState(firstname);
const [newlastName, setNewlastName] = useState(lastname);
var token = getToken();
console.log("Inside Update User Component");
const [updateUser,{loading,data,error}] = useMutation(UPDATE_USER_DETAILS,{
headers: {
Authorization: token ? `Bearer ${token}` : ''}
})
if (loading) return <ScreenLoader/>
if (error){
console.log(error);
return <Text>Error...</Text>
}
console.log(data);
return (
<KeyboardAvoidingView style={styles.container} behavior='padding' enabled>
<ScrollView>
<View style={{ paddingTop: 36 }}>
<Input type="text" value={newfirstName} onChange={e => setNewfirstName(e.target.value)} />
<View style={{ paddingTop: 10 }}>
<Input type="text" value={newlastName} onChange={e => setNewlastName(e.target.value)}/>
</View>
<TouchableHighlight underlayColor='#fff' onPress={() => updateUser({ variables: { "input": {"firstName": newfirstName,"lastName": newlastName }} })} >
<View style={{ paddingTop: 50 }}>
<View style={styles.buttonLayout}>
<Text style={styles.buttonText}>Save Changes</Text>
</View>
</View>
</TouchableHighlight>
</View>
</ScrollView>
</KeyboardAvoidingView>
)
}
const width = Dimensions.get('window').width;
class AccountSettings extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<TopHeader text='Account Settings'/>
<UpdateUserComponent/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
paddingTop: 20,
},
buttonLayout: {
backgroundColor: '#C5C5C5',
width: width * 85 / 100,
height: 45,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 20,
},
buttonText: {
color: '#919191',
fontSize: 14
},
})
export default AccountSettings;Обновление:
Возникла ошибка при получении значений из элементов ввода формы. Если я присваиваю значения напрямую, они обновляются. Например: - если я использую этот оператор при нажатии кнопки, данные обновляются на сервере.
onPress={() => UpdateUser({ variables: { "input": {"firstName": "Prabhu","lastName": "Visu" }} }) }
Пожалуйста, помогите мне решить эту проблему, чтобы она работала динамически. Спасибо .!
