React Context is not updating Data.

huangapple
go评论99阅读模式
英文:

React Context is not updating Data

问题

以下是您要翻译的内容：

  1. I have created a React Context API, I have stored information such as first_name, hobbies, DOB etc in it. I have created a state in the context file and a function that changes the state when called. I am using the context in SignUpForm1.js and SignUpForm2.js, I am trying to update the state of context variables whenever there is a change in the text field, but the data in the context is not updating.
  3. UserData.js (Context)
  4. ```javascript
  5. import React from "react";
  6. import { useState } from "react";
  7. import {Text} from 'react-native';
  8. import { createContext } from "react";
  11. const SignUpContext = React.createContext({});
  13. const UserData = (props)=>{
  15.   var state = {
  16.     pref_pronoun: "",
  17.     DOB: "",
  18.     course: "",
  19.     first_name: "",
  20.     hobby_1: "",
  21.     hobby_2: "",
  22.     hobby_3: "",
  23.     hobby_4: "",
  24.     hobby_5: "",
  25.     home_city: "",
  26.     last_name: "",
  27.     nationality: "",
  28.     student_email: "",
  29.     university: "",
  30.   }
  32.   const [userDetails , setDetails] = useState(state);
  34.   const updateFormData = (field, value) => {
  35.     setDetails({ [field]: value });
  36.     console.log(state);
  37.   };
  39.   return (
  40.     <SignUpContext.Provider value = {{state, updateFormData}}>
  41.       {props.children}
  42.     </SignUpContext.Provider>
  43.   )
  45. }
  47. export {SignUpContext, UserData} ;

SignUpForm1.js

  1. import {
  2.   Image,
  3.   Text,
  4.   StyleSheet,
  5.   View,
  6.   StatusBar,
  7.   ScrollView,
  8.   RefreshControl,
  9. } from "react-native";
  10. import DropDown from "./DropDown";
  11. import Input from "./Input";
  12. import {
  13.   KeyboardAvoidingView,
  14.   TouchableWithoutFeedback,
  15.   Keyboard,
  16. } from "react-native";
  17. import { useCallback, useContext, useState } from "react";
  18. import CustomButton from "./CustomButton";
  19. import { useNavigation } from "@react-navigation/native";
  20. import DateTimePickerModal from "react-native-modal-datetime-picker";
  21. import { Button } from "react-native";
  22. import { SignUpContext, UserData } from "./GlobalUtil/UserData";
  24. const HideKeyboard = ({ children }) => (
  25.   <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
  26.     {children}
  27.   </TouchableWithoutFeedback>
  28. );
  30. function SignUpForm1() {
  31.   
  33.   const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
  34.   const s_context = useContext(SignUpContext);
  36.   const showDatePicker = () => {
  37.     setDatePickerVisibility(true);
  38.   };
  40.   const hideDatePicker = () => {
  41.     setDatePickerVisibility(false);
  42.   };
  45.   const navigation = useNavigation();
  46.   const NationalityData = ["Football", "Cricket", "Programming", "Coding"];
  47.   const [refreshing, setRefreshing] = useState(false);
  49.   const onRefresh = useCallback(() => {
  50.     setRefreshing(true);
  51.     setTimeout(() => {
  52.       setRefreshing(false);
  53.     }, 2000);
  54.   }, []);
  55.   const statusBarHeight = Platform.OS === "ios" ? 50 : StatusBar.currentHeight;
  57.   return (
  59.         <KeyboardAvoidingView behavior="padding">
  60.           <HideKeyboard>
  61.             <View
  62.               style={{
  63.                 height: "100%",
  64.                 width: "100%",
  65.                 backgroundColor: "#f1be63",
  66.               }}
  67.             >
  68.               <View
  69.                 style={{ backgroundColor: "#f1be63", height: statusBarHeight }}
  70.               >
  71.                 <StatusBar barStyle="dark-content" />
  72.               </View>
  73.               <ScrollView
  74.                 contentContainerStyle={styles.rootContainer}
  75.                 refreshControl={
  76.                   <RefreshControl
  77.                     refreshing={refreshing}
  78.                     onRefresh={onRefresh}
  79.                   />
  80.                 }
  81.               >
  82.                 <Image
  83.                   source={require("../assets/aeroplane.png")}
  84.                   style={styles.image}
  85.                   resizeMode="contain"
  86.                 />
  87.                 <Text style={styles.header}>Let's get you set up</Text>
  88.                 <Text style={styles.lowerHeader}>
  89.                   (we promise that it won't take long)
  90.                 </Text>
  92.                 <View style={[styles.textFieldsContainer]}>
  93.                   <View style={{ alignItems: "center" }}>
  94.                     <Input
  95.                       isLabel={true}
  96.                       label="Preferred Pronoun"
  97.                       placeholder="He/Him"
  98.                       onChangeText={(text) => {
  99.                         s_context.updateFormData("pref_pronoun", text);
  100.                       }}
  101.                     />
  102.                     <Input
  103.                       isLabel={true}
  104.                       label="First Name"
  105.                       placeholder="Cameron"
  106.                       onChangeText={(text) => {
  107.                         s_context.updateFormData("first_name", text);
  108.                       }}
  109.                     />
  110.                     <Input
  111.                       isLabel={true}
  112.                       label="Last Name"
  113.                       placeholder="Cox"
  114.                       onChangeText={(text) => {
  115.                         s_context.updateFormData("last_name", text);
  116.                       }}
  117.                     />
  118.                     <View
  119.                       style={{
  120.                         backgroundColor: "white",
  121.                         width: "80%",
  122.                         borderRadius: 5,
  123.                         marginTop: 10,
  124.                       }}
  125.                     >
  126.                       <Button
  127.                         title="Date of Birth"
  128.                         onPress={showDatePicker}
  129.                         color="gray"
  130.                       />
  131.                     </View>
  132.                     <DateTimePickerModal
  133.                       isVisible={isDatePickerVisible}
  134.                       mode="date"
  135.                       onConfirm={(date) => {
  136.                         s_context.updateFormData('dob', date);
  137.                         hideDatePicker();
  138.                       }}
  139.                       onCancel={hideDatePicker}
  140.                       buttonTextColorIOS="white"
  141.                       pickerContainerStyleIOS={{ backgroundColor: "#D89D35" }}
  142.                       isDarkModeEnabled
  143.                     />
  144.                   </View>
  146.                   <View style={{ alignItems: "center" }}>
  147.                     <DropDown
  148.                       data={NationalityData}
  149.                       placeholder="Nationality"
  150.                       onSelect={(selectedItem, index) => {
  151.                         s_context.updateFormData("nationality", selectedItem);
  152.                         }}
  153.                     />
  154.                     <DropDown
  155.                       data={NationalityData}
  156.                       placeholder="University"
  157.                       onSelect={(selectedItem, index) => {
  158.                         s_context.updateFormData("university", selectedItem);
  159.                         }}
  160.                     />
  161.                     <DropDown
  162.                       data={NationalityData}
  163.                       placeholder="Course"
  164.                       onSelect={(selectedItem, index) => {
  165.                         s_context.updateFormData("course", selectedItem);
  166.                         }}
  167.                     />
  168.                     <DropDown
  169.                       data={NationalityData}
  170.                       placeholder="HomeTown City"
  171.                       onSelect={(selectedItem, index) => {
  172.                         s_context.updateFormData("homeCity", selectedItem);
  173.                         }}
  174.                     />
  175.                     <CustomButton
  176.                       isBorder={true}
  177.                       title="Next"
  178.                       onPress={() => {
  179.                         navigation.navigate("SignUp2");
  180.                       }}
  181.                     />
  182.                   </View>
  183.                 </View>
  184.               </ScrollView>
  185.             </View>
  186.           </HideKeyboard>
  187.         </KeyboardAvoidingView>
  188.   );
  189. }
  191. const styles = StyleSheet.create({
  192.   rootContainer: {
  193.     height: "125%",
  194.     justifyContent: "flex-start",
  195.     alignItems: "center",
  196.     marginTop: 24,
  197.   },
  198.   textFieldsContainer: {
  199.     width: "100%",
  200.     flex: 1,
  201.   },
  202.   image: {
  203.     width: "25%",
  204.     height: "10%",
  205.     marginTop: 24,
  206.   },
  207.   header: {
  208.     color: "white",
  209.     fontSize: 26,
  210.     fontWeight: "bold",
  211.     marginVertical: 6,
  212.   },
  213.   lowerHeader: {
  214.     color: "white",
  215.     fontSize: 12,
  216.     marginBottom: 24,
  217.   },
  218. });
  219. export default SignUpForm1;
英文:

I have created a React Context API, I have stored information such as first_name, hobbies, DOB etc in it. I have crated a state in the context file and a function that changes the state when called. I am using the context in SignUpForm1.js and SignUpForm2.js, I am trying to update the state of context variables when ever there is a change in the text field, but the data in the context is not updating.

UserData.js (Context)

  1. import React from &quot;react&quot;;
  2. import { useState } from &quot;react&quot;;
  3. import {Text} from &#39;react-native&#39;;
  4. import { createContext } from &quot;react&quot;;
  5. const SignUpContext = React.createContext({});
  6. const UserData = (props)=&gt;{
  7. var state = {
  8. pref_pronoun: &quot;&quot;,
  9. DOB: &quot;&quot;,
  10. course: &quot;&quot;,
  11. first_name: &quot;&quot;,
  12. hobby_1: &quot;&quot;,
  13. hobby_2: &quot;&quot;,
  14. hobby_3: &quot;&quot;,
  15. hobby_4: &quot;&quot;,
  16. hobby_5: &quot;&quot;,
  17. home_city: &quot;&quot;,
  18. last_name: &quot;&quot;,
  19. nationality: &quot;&quot;,
  20. student_email: &quot;&quot;,
  21. university: &quot;&quot;,
  22. }
  23. const [userDetails , setDetails] = useState(state);
  24. const updateFormData = (field, value) =&gt; {
  25. setDetails({ [field]: value });
  26. console.log(state);
  27. };
  28. return (
  29. &lt;SignUpContext.Provider value = {{state, updateFormData}}&gt;
  30. {props.children}
  31. &lt;/SignUpContext.Provider&gt;
  32. )
  33. }
  34. export {SignUpContext, UserData} ;

SignUpForm1.js

  2. import {
  3. Image,
  4. Text,
  5. StyleSheet,
  6. View,
  7. StatusBar,
  8. ScrollView,
  9. RefreshControl,
  10. } from &quot;react-native&quot;;
  11. import DropDown from &quot;./DropDown&quot;;
  12. import Input from &quot;./Input&quot;;
  13. import {
  14. KeyboardAvoidingView,
  15. TouchableWithoutFeedback,
  16. Keyboard,
  17. } from &quot;react-native&quot;;
  18. import { useCallback, useContext, useState } from &quot;react&quot;;
  19. import CustomButton from &quot;./CustomButton&quot;;
  20. import { useNavigation } from &quot;@react-navigation/native&quot;;
  21. import DateTimePickerModal from &quot;react-native-modal-datetime-picker&quot;;
  22. import { Button } from &quot;react-native&quot;;
  23. import { SignUpContext, UserData } from &quot;./GlobalUtil/UserData&quot;;
  24. const HideKeyboard = ({ children }) =&gt; (
  25. &lt;TouchableWithoutFeedback onPress={() =&gt; Keyboard.dismiss()}&gt;
  26. {children}
  27. &lt;/TouchableWithoutFeedback&gt;
  28. );
  29. function SignUpForm1() {
  30. const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
  31. const s_context = useContext(SignUpContext);
  32. const showDatePicker = () =&gt; {
  33. setDatePickerVisibility(true);
  34. };
  35. const hideDatePicker = () =&gt; {
  36. setDatePickerVisibility(false);
  37. };
  38. const navigation = useNavigation();
  39. const NationalityData = [&quot;Football&quot;, &quot;Cricket&quot;, &quot;Programmming&quot;, &quot;Coding&quot;];
  40. const [refreshing, setRefreshing] = useState(false);
  41. const onRefresh = useCallback(() =&gt; {
  42. setRefreshing(true);
  43. setTimeout(() =&gt; {
  44. setRefreshing(false);
  45. }, 2000);
  46. }, []);
  47. const statusBarHeight = Platform.OS === &quot;ios&quot; ? 50 : StatusBar.currentHeight;
  48. return (
  49. &lt;KeyboardAvoidingView behavior=&quot;padding&quot;&gt;
  50. &lt;HideKeyboard&gt;
  51. &lt;View
  52. style={{
  53. height: &quot;100%&quot;,
  54. width: &quot;100%&quot;,
  55. backgroundColor: &quot;#f1be63&quot;,
  56. }}
  57. &gt;
  58. &lt;View
  59. style={{ backgroundColor: &quot;#f1be63&quot;, height: statusBarHeight }}
  60. &gt;
  61. &lt;StatusBar barStyle=&quot;dark-content&quot; /&gt;
  62. &lt;/View&gt;
  63. &lt;ScrollView
  64. contentContainerStyle={styles.rootContainer}
  65. refreshControl={
  66. &lt;RefreshControl
  67. refreshing={refreshing}
  68. onRefresh={onRefresh}
  69. /&gt;
  70. }
  71. &gt;
  72. &lt;Image
  73. source={require(&quot;../assets/aeroplane.png&quot;)}
  74. style={styles.image}
  75. resizeMode=&quot;contain&quot;
  76. /&gt;
  77. &lt;Text style={styles.header}&gt;Let&#39;s get you set up&lt;/Text&gt;
  78. &lt;Text style={styles.lowerHeader}&gt;
  79. (we promise that it won&#39;t take long)
  80. &lt;/Text&gt;
  81. &lt;View style={[styles.textFieldsContainer]}&gt;
  82. &lt;View style={{ alignItems: &quot;center&quot; }}&gt;
  83. &lt;Input
  84. isLabel={true}
  85. label=&quot;Preferred Pronoun&quot;
  86. placeholder=&quot;He/Him&quot;
  87. onChangeText={(text) =&gt; {
  88. s_context.updateFormData(&quot;pref_pronoun&quot;, text);
  89. }}
  90. /&gt;
  91. &lt;Input
  92. isLabel={true}
  93. label=&quot;First Name&quot;
  94. placeholder=&quot;Cameron&quot;
  95. onChangeText={(text) =&gt; {
  96. s_context.updateFormData(&quot;first_name&quot;, text);
  97. }}
  98. /&gt;
  99. &lt;Input
  100. isLabel={true}
  101. label=&quot;Last Name&quot;
  102. placeholder=&quot;Cox&quot;
  103. onChangeText={(text) =&gt; {
  104. s_context.updateFormData(&quot;last_name&quot;, text);
  105. }}
  106. /&gt;
  107. &lt;View
  108. style={{
  109. backgroundColor: &quot;white&quot;,
  110. width: &quot;80%&quot;,
  111. borderRadius: 5,
  112. marginTop: 10,
  113. }}
  114. &gt;
  115. &lt;Button
  116. title=&quot;Date of Birth&quot;
  117. onPress={showDatePicker}
  118. color=&quot;gray&quot;
  119. /&gt;
  120. &lt;/View&gt;
  121. &lt;DateTimePickerModal
  122. isVisible={isDatePickerVisible}
  123. mode=&quot;date&quot;
  124. onConfirm={(date) =&gt; {
  125. s_context.updateFormData(&#39;dob&#39;, date);
  126. hideDatePicker();
  127. }}
  128. onCancel={hideDatePicker}
  129. buttonTextColorIOS=&quot;white&quot;
  130. pickerContainerStyleIOS={{ backgroundColor: &quot;#D89D35&quot; }}
  131. isDarkModeEnabled
  132. /&gt;
  133. &lt;/View&gt;
  134. &lt;View style={{ alignItems: &quot;center&quot; }}&gt;
  135. &lt;DropDown
  136. data={NationalityData}
  137. placeholder=&quot;Nationality&quot;
  138. onSelect={(selectedItem, index) =&gt; {
  139. s_context.updateFormData(&quot;nationality&quot;, selectedItem);
  140. }}
  141. /&gt;
  142. &lt;DropDown
  143. data={NationalityData}
  144. placeholder=&quot;University&quot;
  145. onSelect={(selectedItem, index) =&gt; {
  146. s_context.updateFormData(&quot;university&quot;, selectedItem);
  147. }}
  148. /&gt;
  149. &lt;DropDown
  150. data={NationalityData}
  151. placeholder=&quot;Course&quot;
  152. onSelect={(selectedItem, index) =&gt; {
  153. s_context.updateFormData(&quot;course&quot;, selectedItem);
  154. }}
  155. /&gt;
  156. &lt;DropDown
  157. data={NationalityData}
  158. placeholder=&quot;HomeTown City&quot;
  159. onSelect={(selectedItem, index) =&gt; {
  160. s_context.updateFormData(&quot;homeCity&quot;, selectedItem);
  161. }}
  162. /&gt;
  163. &lt;CustomButton
  164. isBorder={true}
  165. title=&quot;Next&quot;
  166. onPress={() =&gt; {
  167. navigation.navigate(&quot;SignUp2&quot;);
  168. }}
  169. /&gt;
  170. &lt;/View&gt;
  171. &lt;/View&gt;
  172. &lt;/ScrollView&gt;
  173. &lt;/View&gt;
  174. &lt;/HideKeyboard&gt;
  175. &lt;/KeyboardAvoidingView&gt;
  176. );
  177. }
  178. const styles = StyleSheet.create({
  179. rootContainer: {
  180. height: &quot;125%&quot;,
  181. justifyContent: &quot;flex-start&quot;,
  182. alignItems: &quot;center&quot;,
  183. marginTop: 24,
  184. },
  185. textFieldsContainer: {
  186. width: &quot;100%&quot;,
  187. flex: 1,
  188. },
  189. image: {
  190. width: &quot;25%&quot;,
  191. height: &quot;10%&quot;,
  192. marginTop: 24,
  193. },
  194. header: {
  195. color: &quot;white&quot;,
  196. fontSize: 26,
  197. fontWeight: &quot;bold&quot;,
  198. marginVertical: 6,
  199. },
  200. lowerHeader: {
  201. color: &quot;white&quot;,
  202. fontSize: 12,
  203. marginBottom: 24,
  204. },
  205. });
  206. export default SignUpForm1;

SignUpForm2.js

  2. import {
  3. View,
  4. Text,
  5. TouchableWithoutFeedback,
  6. StyleSheet,
  7. StatusBar,
  8. ScrollView,
  9. } from &quot;react-native&quot;;
  10. import { KeyboardAvoidingView } from &quot;react-native&quot;;
  11. import { Avatar } from &quot;react-native-elements&quot;;
  12. import Input from &quot;./Input&quot;;
  13. import DropDown from &quot;./DropDown&quot;;
  14. import { Keyboard } from &quot;react-native&quot;;
  15. import { Platform } from &quot;react-native&quot;;
  16. import { useNavigation } from &quot;@react-navigation/native&quot;;
  17. import CustomButton from &quot;./CustomButton&quot;;
  18. import { useState, useContext } from &quot;react&quot;;
  19. import { createNewUser } from &quot;./util/auth&quot;;
  20. import { SignUpContext, UserData } from &quot;./GlobalUtil/UserData&quot;;
  21. const HideKeyboard = ({ children }) =&gt; (
  22. &lt;TouchableWithoutFeedback onPress={() =&gt; Keyboard.dismiss()}&gt;
  23. {children}
  24. &lt;/TouchableWithoutFeedback&gt;
  25. );
  26. function SignUpForm2() {
  27. const s_context = useContext(SignUpContext);
  28. async function FinishBtnHandler()
  29. {
  30. console.log(&quot;Creating New User&quot;);
  31. console.log(&quot;Email: &quot; + emailText.trim());
  32. console.log(&quot;Password: &quot; + passwordText.trim());
  33. await createNewUser(emailText.trim(), passwordText.trim());
  34. }
  35. const navigation = useNavigation();
  36. const hobbiesData = [&quot;Football&quot;, &quot;Cricket&quot;, &quot;Programmming&quot;, &quot;Coding&quot;];
  37. const [emailText, setEmailText] = useState(&quot;&quot;);
  38. function handleEmailText(newText) {
  39. console.log(&quot;Email: &quot; + newText);
  40. setEmailText(newText);
  41. }
  42. const [passwordText, setPasswordText] = useState(&quot;&quot;);
  43. function handlePasswordText(newText) {
  44. console.log(&quot;Password: &quot; + newText);
  45. setPasswordText(newText);
  46. }
  47. function avatarPressHandler() {
  48. console.log(&quot;Pressed!&quot;);
  49. }
  50. const statusBarHeight = Platform.OS === &quot;ios&quot; ? 50 : StatusBar.currentHeight;
  51. return (
  52. &lt;KeyboardAvoidingView behavior=&quot;padding&quot; style={{ flex: 1 }}&gt;
  53. &lt;HideKeyboard&gt;
  54. &lt;ScrollView&gt;
  55. &lt;View
  56. style={{
  57. position: &quot;absolute&quot;,
  58. top: 0,
  59. left: 0,
  60. right: 0,
  61. zIndex: 999,
  62. }}
  63. &gt;
  64. &lt;View
  65. style={{
  66. backgroundColor: &quot;#f1be63&quot;,
  67. height: statusBarHeight,
  68. }}
  69. &gt;
  70. &lt;StatusBar barStyle=&quot;dark-content&quot; /&gt;
  71. &lt;/View&gt;
  72. &lt;/View&gt;
  73. &lt;View style={[styles.rootContainer, { paddingBottom: 48 }]}&gt;
  74. &lt;View style={styles.lowerContainer}&gt;
  75. &lt;Text style={styles.primaryText}&gt;You&#39;re almost there!&lt;/Text&gt;
  76. &lt;Avatar
  77. rounded
  78. size={170}
  79. containerStyle={{ alignSelf: &quot;center&quot;, marginTop: 24 }}
  80. //icon={{ name: &quot;user&quot;, type: &quot;font-awesome&quot; }}
  81. overlayContainerStyle={{ backgroundColor: &quot;#f1be63&quot; }}
  82. source={{
  83. uri: &quot;https://cdn.pixabay.com/photo/2019/11/03/20/11/portrait-4599553__340.jpg&quot;,
  84. }}
  85. &gt;
  86. &lt;Avatar.Accessory size={20} onPress={avatarPressHandler} /&gt;
  87. &lt;/Avatar&gt;
  88. &lt;Text
  89. style={[
  90. styles.secondaryText,
  91. { marginBottom: 8, marginTop: 16 },
  92. ]}
  93. &gt;
  94. Express yourself &amp; customize your avatar
  95. &lt;/Text&gt;
  96. &lt;Input
  97. isLabel={true}
  98. label=&quot;Student Email&quot;
  99. placeholder=&quot;cce22rnu@uea.ac.uk&quot;
  100. onChangeText={handleEmailText}
  101. defaultValue={emailText}
  102. /&gt;
  103. &lt;Input
  104. isLabel={true}
  105. label=&quot;Create Password&quot;
  106. placeholder=&quot;iLoveyoushakila123&quot;
  107. onChangeText={handlePasswordText}
  108. defaultValue={passwordText}
  109. /&gt;
  110. &lt;Input
  111. isLabel={true}
  112. label=&quot;Confirm Password&quot;
  113. placeholder=&quot;iLoveyoushakila123&quot;
  114. /&gt;
  115. &lt;Text style={styles.secondaryText}&gt;
  116. Now the exciting part - select your top 5 hobbies
  117. &lt;/Text&gt;
  118. &lt;View style={{ alignItems: &quot;center&quot;, marginTop: 16 }}&gt;
  119. &lt;DropDown
  120. data={hobbiesData}
  121. onSelect={(selectedItem, index) =&gt; {
  122. s_context.updateFormData(&quot;hobby_1&quot;, selectedItem);
  123. }}
  124. /&gt;
  125. &lt;DropDown data={hobbiesData} onSelect={(selectedItem, index) =&gt; {
  126. s_context.updateFormData(&quot;hobby_2&quot;, selectedItem);
  127. }}/&gt;
  128. &lt;DropDown data={hobbiesData} onSelect={(selectedItem, index) =&gt; {
  129. s_context.updateFormData(&quot;hobby_3&quot;, selectedItem);
  130. }}/&gt;
  131. &lt;DropDown data={hobbiesData} onSelect={(selectedItem, index) =&gt; {
  132. s_context.updateFormData(&quot;hobby_4&quot;, selectedItem);
  133. }}/&gt;
  134. &lt;DropDown data={hobbiesData} onSelect={(selectedItem, index) =&gt; {
  135. s_context.updateFormData(&quot;hobby_5&quot;, selectedItem);
  136. }}/&gt;
  137. &lt;CustomButton
  138. isBorder={true}
  139. title=&quot;Finish&quot;
  140. /*onPress={()=&gt;{navigation.navigate(&quot;ConfirmId&quot;)}}*/ onPress={
  141. FinishBtnHandler
  142. }
  143. /&gt;
  144. &lt;/View&gt;
  145. &lt;/View&gt;
  146. &lt;/View&gt;
  147. &lt;/ScrollView&gt;
  148. &lt;/HideKeyboard&gt;
  149. &lt;/KeyboardAvoidingView&gt;
  150. );
  151. }
  152. const styles = StyleSheet.create({
  153. rootContainer: {
  154. flex: 1,
  155. justifyContent: &quot;flex-start&quot;,
  156. alignItems: &quot;center&quot;,
  157. backgroundColor: &quot;#f1be63&quot;,
  158. marginTop: 48,
  159. backgroundColor: &quot;#f1be63&quot;,
  160. },
  161. lowerContainer: {
  162. flex: 1,
  163. width: &quot;100%&quot;,
  164. alignItems: &quot;center&quot;,
  165. },
  166. primaryText: {
  167. color: &quot;white&quot;,
  168. fontSize: 24,
  169. fontWeight: &quot;bold&quot;,
  170. },
  171. secondaryText: {
  172. marginTop: 8,
  173. color: &quot;white&quot;,
  174. fontSize: 12,
  175. fontWeight: &quot;bold&quot;,
  176. },
  177. });
  178. export default SignUpForm2;

React Context is not updating Data.

答案1

得分: 3

只返回翻译好的部分：

  1. You need to pass your userDetails state variable to the context, not the initial state value.
    你需要将userDetails状态变量传递给上下文，而不是初始的state值。

  2. Passing the initial state object will not see any updates you make.
    传递初始状态对象将不会看到你所做的任何更新。

  3. Also, you should use the functional updates format to dynamically set properties in your state.
    另外，你应该使用函数更新格式来动态设置状态中的属性。

  4. setDetails((prev) => ({ ...prev, [field]: value }));

  5. Finally, console logging state is a pointless exercise that often gives unexpected results. Just don't do it.
    最后，记录状态到控制台是一个毫无意义的操作，通常会导致意外的结果。不要这样做。

英文:

You need to pass your userDetails state variable to the context, not the initial state value

  1. &lt;SignUpContext.Provider value={{ state: userDetails, updateFormData }}&gt;
  2. {props.children}
  3. &lt;/SignUpContext.Provider&gt;

Passing the initial state object will not see any updates you make.

Also, you should use the functional updates format to dynamically set properties in your state

  1. setDetails((prev) =&gt; ({ ...prev, [field]: value }));

Finally, console logging state is a pointless exercise that often gives unexpected results. Just don't do it

huangapple
  • 本文由 发表于 2023年2月14日 06:35:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/75441833.html
  • javascript
  • react-native
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定