Reactjs 在react js中未更新输入字段值

我正在为我的学习创建一个简单的react应用程序。所以我是一个初学者。我面临的一个问题是，每当我键入内容时，它都不会更新输入字段的值。无论来自api的是什么，它都保持原样

这是我的密码

import React, { useState, useContext, useEffect } from 'react';
import axios from 'axios';
export default function Edit(id) {

const [ name, setName] = useState([]);
const [ email, setEmail] = useState([]);

  useEffect( () =>  {
    const singleData = async () => {
        try{ 
            let response = await axios.get( 'http://localhost:8000/api/show/' + id.match.params.id)
             .then(res => {
              setName(res.data.name);
              setEmail(res.data.email);
            })
            .catch((error) => {
              console.log(error);
            })
        }
        catch(error) {
            console.log(error)
        }
    }
    singleData()
})  
return (
    <div>
        <form>
          <div className="form-group">
            <input type="text" value={name}  onChange={(e) => setName(e.target.value)} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
          </div>
          <div className="form-group">
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="form-control" id="exampleInputPassword1" placeholder="Password" />
          </div>
          <button type="submit" className="btn btn-primary">Submit</button>
        </form>
    </div>
);
}

import React，{useState，useContext，useffect}来自“React”；
从“axios”导入axios；
导出默认功能编辑（id）{
const[name，setName]=useState（[]）；
const[email，setEmail]=useState（[]）；
useffect（（）=>{
const singleData=async（）=>{
试试{
let response=等待axios.get（'http://localhost:8000/api/show/“+id.match.params.id）
。然后（res=>{
setName（res.data.name）；
setEmail（res.data.email）；
})
.catch（（错误）=>{
console.log（错误）；
})
}
捕获（错误）{
console.log（错误）
}
}
singleData（）
})  
返回(
setName（e.target.value）}className=“表单控制”id=“exampleInputEmail1”aria descripebby=“emailHelp”占位符=“输入电子邮件”/>
setEmail（e.target.value）}className=“表单控制”id=“exampleInputPassword1”占位符=“密码”/>
提交
);
}

如果没有数组依赖项，则每次更新状态时都会运行

useffect

。因此，它实际上只是撤消您键入的任何内容，并用另一个fetch替换它。 假设您只希望在组件挂载时获取它，请向

useffect

i、 e

---

无依赖项的useEffect数组将在每次重新渲染时运行，以便在组件装载时仅运行一次，并添加一个空的依赖项数组

useffect（（）=>{
const singleData=async（）=>{
试一试{
const{data}=await axios(
`http://localhost:8000/api/show/${id.match.params.id}`，
)
setName（data.name）
setEmail（data.email）
}捕获（错误）{
console.log（错误）
}
}
singleData（）
}, [])

这正是我昨天面临的问题。非常感谢，非常感谢。我得到了答案。

useEffect( () =>  {
const singleData = async () => {
    try{ 
        let response = await axios.get( 'http://localhost:8000/api/show/' + id.match.params.id)
           .then(res => {
            setName(res.data.name);
            setEmail(res.data.email);
          })
          .catch((error) => {
            console.log(error);
          })
      }
      catch(error) {
          console.log(error)
      }
  }
  singleData()
},[])