时间戳

首页 > 解决方案 > reactjs上根据动态数据填写表单

reactjs - reactjs上根据动态数据填写表单

问题描述

我正在尝试一个非常简单的实现，即useState更改表单字段的钩子。表单字段包含一个产品名称，该名称是在 api 调用之后带来的。在 api 调用之后，我想在表单值中设置名称，但它不起作用。让我们跳到下面的代码

import React, {useState, useEffect} from 'react'
import {Form, Input} from 'antd'
const Product = () => {
    const [name, setname] = useState('')
    //get data from api call here
    useEffect(() => {
        //or get data from api call here
        setname(apidata.name)
        console.log(apidata.name) //It prints name in console
    })
    return(
        <Form>
            <Input value={name} onChange={e => setname(e.target.value)} /> //But here i cant get value
        </Form>
    )
}
export default Product

上面标有注释，即使我在 useEffect 中使用硬代码名称，我的代码也不起作用，就像setname('mabuhay')它不起作用一样。

注意：我apollo-react useQuery用来从graphql api& 第一个响应返回空对象获取数据

标签： reactjs

解决方案

尝试在你的 useeffect 中添加一个空数组，我认为每次你为 name 设置一个值时都会调用它，这就是为什么没有发生任何事情

useEffect(() => {
  setname(apidata.name)
  console.log(apidata.name)
}, [])

推荐阅读