在 React Native 中更新多个状态

关键词：

【中文标题】在 React Native 中更新多个状态【英文标题】：Updating multiple states in React Native 【发布时间】：2022-01-22 03:20:52 【问题描述】：

我正在尝试跟踪多个状态（本例中的错误处理），但由于现阶段未知的原因（我认为缺乏理解）我似乎只能保持最后一次错误函数调用的状态：

export const SignUp = () => 
  const [errors, setErrors] = useState();
  
  const validateFirstName = () => 
    if (formData.firstName === undefined) 
      setErrors(prevState => (
        ...prevState.firstName,
        firstName: 'First Name is required',
      ));
      return false;
     else if (formData.firstName.length < 3) 
      setErrors(prevState => (
        ...prevState.firstName,
        firstName: 'First Name is too short',
      ));
      return false;
    
    return true;
  ;

  const validateLastName = () => 
    if (formData.lastName === undefined) 
      setErrors(prevState => (
        ...prevState.lastName,
        lastName: 'Last Name is required',
      ));
      return false;
     else if (formData.lastName.length < 1) 
      setErrors(prevState => (
        ...prevState.lastName,
        lastName: 'Last Name is too short',
      ));
      return false;
    
    return true;
  ;

  const formSubmitHandler = e => 
    e.preventDefault();
    validateFirstName();
    validateLastName();
  ;

所以在我的formSubmitHandler 中，我依次调用每个方法。这是错的吗？例如，他们需要async 吗？还是问题出在我的setError 函数中？我没有正确设置更新的状态吗？

当我退出errors 时，我只看到lastName：

"errors": "lastName": "Last Name is required"

我可以尝试什么来解决这个问题？

【问题讨论】：

【参考方案1】：

您可以通过不同的方式来执行此操作。您也可以只批量处理来自验证器的响应并一次性设置状态。这也将减少您的应用的重新呈现。

工作示例：https://snack.expo.dev/@tnr_c/funny-raspberries

【讨论】：

感谢您提供示例，我想我会试试这个。所以要正确理解，可以说我的表单有 10 个字段要验证，使用我当前的实现，我将渲染 10 次？而在您的示例中，我可以只重新渲染一次并且仍然验证所有字段？ 对 state/props 的更改将导致组件重新渲染。然而，react 对事件处理程序和批处理它们很聪明。您可以在此处找到更多信息：***.com/a/48610973/458193。如果您将所有验证器批处理到示例中的按钮按下等事件，您可以按照@user3812411 建议的更改方式处理它，它会正常工作。【参考方案2】：

这就是你的问题所在：

  
    ...prevState.lastName,
    lastName: 'Last Name is too short',
  

您只是将姓氏（或其他函数中的名字）传递给您的新状态，因此它不再具有其他值。

只要做：

  
    ...prevState,
    lastName: 'Last Name is too short',
  

对于所有这些，您现在应该拥有错误状态中的所有值

【讨论】：

哦，成功了，太棒了！非常感谢...只需要弄清楚为什么现在这样有效，不太确定我是否完全理解流程 所以，您正在做的是使用一个状态对象来处理所有错误。所以，对象看起来像 error1: "", error2: "", ...。现在，当您更新状态时，prevState 是包含所有错误的整个当前对象，因此您传递 ...prevState 并使用 ...prevState, error1: "new value" 替换您要更改的对象. 明白了，现在更有意义了，谢谢 可能需要一个单独的问题，但如果需要，我将如何从错误对象中删除密钥？ @Richlewis 将对象复制到一个常量中（const tmp = errors），删除 tmp.yourKey，setErrors(tmp)。因此，例如，如果您要删除 lastName，请删除 tmp.lastName 然后 setErrors(tmp)【参考方案3】：

将函数按照与表单相同的顺序排列，因此在转到下一个之前先检查每个函数。

【讨论】：

谢谢@Arti，所以我会在我的formSubmitHandler 中设置这个？ @Richlewis useEffect 用在外面，就像一个componentDidMount函数，和其他函数分开，别忘了从react中导入useEffect！ @Richlewis 把这个留在这里它可能会对你有所帮助！ useEffect 谢谢 :-)，会花一些时间阅读，确实尝试了上述选项，第一个以无限循环结束，第二个似乎没有改变任何东西.. 会继续寻找跨度> 你介意把 validateFirstName();下面 validateLastName();在提交功能？如果在错误中打印 "errors": "firstName": "First Name is required" 这是因为 lastname 正在替换 useState 并且您需要添加 , 来声明而不是替换它。【参考方案4】：

react 中的状态变化是异步的，所以：

validateFirstName();
validateLastName();

你在哪里更新错误状态会导致不可预知的结果。 在反应中进行表单验证的选项很少，为了保持基本的我会开始： https://reactjs.org/docs/hooks-reference.html#usereducer

【讨论】：

在 React Native 中从子组件 TextInput 更新父组件状态

】在ReactNative中从子组件TextInput更新父组件状态【英文标题】：UpdatingParentcomponentstatefromChildcomponentTextInputinReactNative【发布时间】：2021-12-2713:43:53【问题描述】：我有一个调查问题列表作为用户填写的组件，并且我正在尝试遍历... 查看详情

如何在 react-native 中更新 Tab Navigator 中徽章计数器的状态

】如何在react-native中更新TabNavigator中徽章计数器的状态【英文标题】：HowtoupdatethestateofbadgecounterinTabNavigatorinreact-native【发布时间】：2020-03-2719:06:32【问题描述】：我使用createBottomTabNavigator作为标签栏。并且在通知的标签栏中，... 查看详情

无法更新状态 - react-native

】无法更新状态-react-native【英文标题】：UnabletoupdatestatewhileusingReactNative【发布时间】：2022-01-2201:10:49【问题描述】：试图掌握反应钩子useState。目前我无法更新我的错误对象的状态，有点不确定我哪里出错了。这里的想法是将... 查看详情

react-native中如何更新两个独立组件的状态？

】react-native中如何更新两个独立组件的状态？【英文标题】：Howtoupdatethestateoftwoindependentcomponentsinreact-native?【发布时间】：2016-08-0823:02:10【问题描述】：更新react-native中两个独立组件的状态。例如，我有两个组件，如contributorOne... 查看详情

使用 textInput React Native 更新数组对象中处于状态的元素

】使用textInputReactNative更新数组对象中处于状态的元素【英文标题】：UpdateanelementinanarrayobjectatstatebyusingtextInputReactNative【发布时间】：2017-12-2822:44:06【问题描述】：我在这里尝试做的是使用textInput更新数组对象“可用”，下面是... 查看详情

如何从存储中更新 React Native 功能组件状态

】如何从存储中更新ReactNative功能组件状态【英文标题】：HowtoUpdateReactNativeFunctionalComponentStatefromStorage【发布时间】：2021-12-2405:51:14【问题描述】：我有这个组件正在尝试使用从存储中加载的对象来设置其状态：importReactfrom"react"... 查看详情

React Native - Redux：应用程序中相同状态的多个实例

】ReactNative-Redux：应用程序中相同状态的多个实例【英文标题】：ReactNative-Redux:Multipleinstancesofsamestateinapp【发布时间】：2017-02-2216:49:32【问题描述】：我是ReactNative的新手。我正在为我的reactnative应用程序使用redux架构，但是由于r... 查看详情

ScrollView 在 react-native 中渲染没有数据的更新组件？

】ScrollView在react-native中渲染没有数据的更新组件？【英文标题】：ScrollViewrenderingupdatedcomponentswithoutdatainreact-native?【发布时间】：2017-07-1112:40:57【问题描述】：我的页面位于react-native应用的ScrollView中。在第一次加载子组件时，... 查看详情

React Native 和 Redux：为啥子组件不会在每次状态更新时重新渲染？

】ReactNative和Redux：为啥子组件不会在每次状态更新时重新渲染？【英文标题】：ReactNative&Redux:Whyaren\'tchildcomponentsre-renderingoneverystateupdate?ReactNative和Redux：为什么子组件不会在每次状态更新时重新渲染？【发布时间】：2017-01-14... 查看详情

从组件 React Native 中访问状态

】从组件ReactNative中访问状态【英文标题】：AccessingstatefromwithincomponentReactNative【发布时间】：2018-09-2504:57:17【问题描述】：我对本机反应并在使用RkButton并在单击按钮时更新状态的应用程序上工作还很陌生。代码是这样的。render... 查看详情

React (Native) Context API 导致 Stack Navigator (React Navigation 5) 在状态更新后重新渲染

】React(Native)ContextAPI导致StackNavigator(ReactNavigation5)在状态更新后重新渲染【英文标题】：React(Native)ContextAPICausesStackNavigator(ReactNavigation5)tore-renderafterstateupdate【发布时间】：2020-11-2114:05:01【问题描述】：提前感谢您帮助解决这个问... 查看详情

已解决：React Redux 的 useSelector 不会在 expo react-native 上更新 store 的状态

】已解决：ReactRedux的useSelector不会在exporeact-native上更新store的状态【英文标题】：SOLVED:useSelectorofReactReduxdon\'tupdatestateofstoreonexporeact-native【发布时间】：2020-09-2521:52:52【问题描述】：我在网上制作了相同的模型并且它有效，我尝... 查看详情

如何在 React Native 中使用 React Native Video 显示多个视频？ [关闭]

】如何在ReactNative中使用ReactNativeVideo显示多个视频？[关闭]【英文标题】：HowcanIshowmultiplevideoswithReactNativeVideoinReactNative?[closed]【发布时间】：2020-02-1409:30:29【问题描述】：如何使用ReactNative的ReactNativeVideo组件显示多个视频？这里... 查看详情

React：如何使用用户当前位置的更新状态而不是初始状态

...2-0807:44:39【问题描述】：我正在为我的应用程序使用React-native-maps。我制作了假的json餐厅数据并获取了该数据，并使用Marker显示在我的地图上。在React-native-maps中 查看详情

在 React 中动态更新“状态”会覆盖整个状态

】在React中动态更新“状态”会覆盖整个状态【英文标题】：Updating\'state\'dynamicallyinReactoverwritesentirestate【发布时间】：2019-06-1502:33:00【问题描述】：好的，所以我正在尝试在React中构建一个表单，我可以在其中在多个输入中输入... 查看详情

我们如何在反应中部分更新状态？

...间】：2017-08-1110:16:35【问题描述】：我想知道在React/React-Native中部分更新组件状态的最佳方法是什么。除了我可以创建一个函数来获取当前状态并创建一个新状态并将新的key:value和以前的状态合并。例如：dataStream:[//havingdatahere],... 查看详情

在 React Native Input/TextInput 中输入值时如何更新 JSON 对象值

】在ReactNativeInput/TextInput中输入值时如何更新JSON对象值【英文标题】：HowtoupdateaJSONobjectvaluewhenvalueisenteredinReactNativeInput/TextInput【发布时间】：2021-12-2719:16:29【问题描述】：作为调查的一部分，我有一个供用户完成的问题列表，... 查看详情

在 React Native 中更新推送通知令牌

】在ReactNative中更新推送通知令牌【英文标题】：RenewPushNotificationTokeninReactNative【发布时间】：2020-02-1412:23:10【问题描述】：我在我的跨平台应用（iOS和Android）中使用react-native-push-notification。我完全不清楚这个插件是如何工作的... 查看详情