从服务器获取后无法在 Reactjs 中编辑表单字段

Question

我在 Reactjs 中有一个用户编辑页面，我在其中获取用户详细信息并将其填充到相应的输入字段。问题是在获取并显示数据后我无法编辑字段。

我的代码是：

function EditProfile(props) {
    const [user, setUser] = useState()
    useEffect(() => {
        const fetchUserInfo = async () => {
            const profileConfig = {
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + auth.token
                }
            };
            fetch(`http://localhost:4000/api/v1/user/me`, profileConfig)
            .then(response => response.json())
            .then(response => {
                console.log("response: ", response.user);
                if (response.success === true) {
                    setUser(response.user)
                } else {
                    alert(response.message)
                }
            },
            (error) => {
                alert('User fetching faied: ' + error)
            })
        }
        fetchUserInfo()
    }, [])

    return (
       <form>
           <input type="text" value={user.name} name="name" />
       </form>
    )
}

相应的名称显示在此输入字段中，但不可编辑。如何解决问题？

Answer 1

在 React 中，受控组件需要值和更改处理程序。

function EditProfile(props) {
    const [user, setUser] = useState({name: ''})

    useEffect(() => {
        /*
          ....
        */
    }, [])

    const handleChange = e => {
       setUser({...user, name: e.target.value})
    }

    return (
       <form>
           <input type="text" onChange={handleChange} value={user.name} name="name" />
       </form>
    )
}

Answer 2

您尚未在 input 上添加 onChange 函数，React 建议将其设为 controlled component。具有受控输入的优点是您可以在整个 React 组件中获得可用的值，并且不需要在输入时触发事件或访问 DOM 来获取值。

如果您不想创建受控组件，您可以这样做：

<input type="text" defaultValue={user.name} name="name" />

使用 defaultValue 而不是 value。因为在 React 渲染生命周期中，表单元素上的 value 属性会覆盖 DOM 中的值。有了这个，你希望 React 指定初始值，但让后续更新不受控制，因此创建 uncontrolled component.

如果您创建一个受控组件，您将必须指定一个函数来处理更改并将其设置为@Vaibhav 下面的回答所指定的状态：

从服务器获取后无法在 Reactjs 中编辑表单字段

Unable to edit form fields in Reactjs after fetched from server

reactjs

react-forms