react-native 组件 某state更新再次 触发Form render 方法后， 二次 点击 submit 收集的值变位空

[supermaverickws]

这个特性解决了什么问题？

react-native 组件 某state更新后 Form 二次 触发 submit 收集的值变位空

原因是。外面组件state 更新后，好像触发了 Form 组件的 bindValueChangeEvent 方法。
如果外面没有把第一次收集的值 设置到 value 属性里。 就会重置 Form 组件的 formValues 里对应的值。
如果加个是否 value !== undifend 判断的话，就正常，

[github-actions]

等待热心的小伙伴解决问题中..., 有一些相关的 issues 可能帮助到你!

• taro react input 约束性组件视图不更新
• video全屏状态下，修改video组件的id值，video自动退出全屏，且未触发fullscreenChange事件
• Taro 3 版本 Map组件无法触发onClick或onTap事件。

Thank you so much!

[supermaverickws]

@zhiqingchen

[zhiqingchen]

可否提供相应复现代码片段

[zhiqingchen]

表单项value变更，不应该更新一下对应属性？

[supermaverickws]

@zhiqingchen
你输入任意值后。点击按钮 提交两次 。
第一次 正常。 第二次就变为空了

export default function TestFormSubmitTwice(){
    const [input, setInput] = useState();
  
    return <Form onSubmit={value => {
        setInput(value.detail.value?.code || "无")
        Taro.showToast({ title : JSON.stringify(value.detail.value || "无数据")})
    }}>
        <Label>{input}</Label>
       <Input  name="code" placeholder={"请输入"} />
       <Button
                        type="primary"
                        formType="submit"
                        >
                        {"提交, 第二次提交时， code值被重置"}
                    </Button>
    </Form>
  }

[zhiqingchen]

建议加上value属性

import { useState } from 'react'
import {Form, Label, Button, Input} from '@tarojs/components'
import Taro from '@tarojs/taro'

export default function TestFormSubmitTwice() {
  const [input, setInput] = useState();
  const [v, setV] = useState('')

  return (
    <Form
      onSubmit={value => {
        setInput(value.detail.value?.code || "无");
        Taro.showToast({
          title: JSON.stringify(value.detail.value || "无数据")
        });
      }}
    >
      <Label>{input}</Label>
      <Input name="code" value={v} onInput={({detail}) => {
        setV(detail.value)
      }} placeholder="请输入"
      />
      <Button type="primary" formType="submit">
        提交, 第二次提交时， code值被重置
      </Button>
    </Form>
  );
}

[supermaverickws]

@zhiqingchen 可以加这个属性。
但是感觉没必要加。 input 组件太多的话。每个都要写重复的value。
而源码里面只要判断下是否是 undined 就行。

[supermaverickws]

@zhiqingchen 但是最终要考虑app端、小程序端、H5 端 Form 组件行为一致性。

[supermaverickws]

如果其他端也是同样的逻辑。可以不加。然后你可以关闭此提问。
如果其他端不是此逻辑的话。建议还是修复下。

[zhiqingchen]

你提的是对的，只是这么改有个小问题，可能有设置value为undefined的场景。

[zhiqingchen]

建议你先打patch解决自身业务问题，此处改动还需要再思考下🤔。

[supermaverickws]

好的。

[supermaverickws]

你看这样是不是可以。
你可以再加一个 集合属性。 缓存input组件的 name-value
每次判断是否和上一个value 是否相同。相同就忽略。不同就更新
就是每次变动，做下diff 操作。

[zhiqingchen]

还是判断 undefined 吧

[supermaverickws]

行

[zhiqingchen]

@supermaverickws 有遇到生产环境下，收集不到form的数据吗

[zhiqingchen]

#11547

[zhiqingchen]

release 还是 debug

[zhiqingchen]

如果是其他问题，另外提供issue吧

[taoWcode]

哈哈，我这边只是提醒下，这个issue的表单使用者也可能遇到这个问题。