Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

异步请求添加的 FormItem 无法获取到 Form initialValues 预设值 #453

Closed
7 tasks done
17 opened this issue Feb 7, 2023 · 3 comments
Closed
7 tasks done
Labels
bug Something isn't working

Comments

@17
Copy link

17 commented Feb 7, 2023

这个 Issue 涉及以下平台:

  • 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 头条小程序
  • 快手小程序
  • QQ 轻应用
  • Web 平台(H5)

BUG 描述
异步请求生成的 FormItem 无法获取到 Form initialValues 设定的 值
复现步骤

import React, { useEffect, useState } from 'react'
import { View, Text, Input } from '@tarojs/components'
import { Button, FormItem, Form, Dialog } from '@antmjs/vantui'

const initialValues = {
  mutiData: { a: [1, 2, 3, 4] },
  useInfo: [
    {
      name: 'bbbb',
      age: 12
    },
    {
      name: 'aaaa',
      age: 13
    }
  ]
}

export default function Demo () {
  const formIt = React.useRef(null)
  const [data, setData] = useState([])

  useEffect(() => {
    setInterval(() => setData([1, 2]), 1000)
  }, [])

  return (
    <Form ref={formIt} initialValues={initialValues}>
      {/* {[1, 2].map((v, i)=>{ */}
      {data.map((v, i) => {
        return (
          <>
            <FormItem
              label={`名称(${i + 1})`}
              name={['useInfo', i, 'name']}
              trigger='onInput'
              valueFormat={e => e.detail.value}
            >
              <Input placeholder='请输入用户名' />
            </FormItem>
            <FormItem
              label={`年龄(${i + 1})`}
              name={['useInfo', i, 'age']}
              trigger='onInput'
              valueFormat={e => e.detail.value}
            >
              <Input placeholder='请输入年龄' />
            </FormItem>
          </>
        )
      })}
      <FormItem name='mutiData' mutiLevel label='复杂数据'>
        <MutiData />
      </FormItem>
      <Button
        className='van-button-submit'
        formType='submit'
        onClick={() => {
          Dialog.alert({
            message: `result: ${JSON.stringify(
              formIt.current.getFieldsValue()
            )}`,
            selector: 'form-demo3'
          })
        }}
      >
        提交
      </Button>
      <Dialog id='form-demo3' />
    </Form>
  )
}

function MutiData (value) {
  return <>{JSON.stringify(value)}</>
}

以上代码在文档择抄。用注释中的 {[1, 2].map((v, i)=>{ 能够正常获取预设值。
执行以上代码则不能获取。

期望结果
能够正常运行。

实际结果截图

image

@17 17 changed the title 动态添加的 FormItem 无法获取 initialValues 设定的值 异步请求添加的 FormItem 无法获取到 Form initialValues 预设值 Feb 7, 2023
@17
Copy link
Author

17 commented Feb 7, 2023

临时解决办法:
异步添加完成后,使用 setFields 设置指定值。

    formIt.current.setFields({
      data
    })

@zuolung zuolung added the bug Something isn't working label Feb 8, 2023
@zuolung
Copy link
Contributor

zuolung commented Feb 8, 2023

👌,近期会修复

@17
Copy link
Author

17 commented Feb 9, 2023

GOODJOB!

@17 17 closed this as completed Feb 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants