使用 Mutation hook 更新 Graphql 服務器中的數據

Question

其實我是 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" }} }) }

請幫助我解決此問題，使其動態工作。 謝謝 。！

Answer 1

替換這個：

  *onChange={e => setNewfirstName(e.target.value)}*

有了這個：

  *onChangeText={text => setNewfirstName(text)}*

它會起作用的。！