即使使用 onChange 处理程序，输入表单值也保持不变答案

【问题标题】：Input form value remains the same even with an onChange handler即使使用 onChange 处理程序，输入表单值也保持不变
【发布时间】：2020-08-06 10:05:52
【问题描述】：

此代码是一个功能组件，应根据 isUpdate 的状态呈现用户详细信息页面（显示详细信息视图）或用于编辑（编辑详细信息视图）此用户信息的表单。这没问题，因为 update 和 save 按钮会改变 isUpdate 分别渲染编辑视图或显示视图。

当我选择用户时，页面会通过 match.params.id 获取特定用户，这也可以。我的问题是当 isUpdate 设置为 true （具有用户详细信息原始值的编辑表单被渲染）我希望输入值在我输入时会发生变化，但值保持与其原始值相同（无法输入新值）。我不知道为什么我会遇到这个问题。

UserDetail组件代码如下：

import React, {Fragment, useEffect, useState} from 'react';
import { connect }                            from 'react-redux';
import { findUser }                           from '../../actions/user';

const UserDetails =({match, user, loading, findUser}) => {
    
    const[isUpdate, setIsUpdate]=useState(false);
    
    //fetching user info based on the params id
        useEffect(() => {
    findUser(match.params.id);
    
    },[])
    
    //setting the initial state of user to  the values from the fetched data
    const[userData, setUserData]=useState({
        name: user.name,
        email: user.email,
    });
    
    //on Change handler
      const onChange = e =>{
          setUserData({...userData, [e.target.name]:e.target.value})
      }
      
      //User detail rendered to be viewed or edited
    return loading  ? 
        (<Fragment>
            <div className="loader-container" ></div>
                   <div className="loader"></div>  
        </Fragment>) :
    
        (isUpdate ? (
    
         <Fragment> 
            <div className="detail-container">
                
              <form>
                  
                <div className="form-row">  
                  <div className="form-group col-md-6">
                      <label htmlFor="name">Full Name:</label>
                      <input
                          type="name"
                          className="form-control"
                          id="name"
                          name="name"
                          value={user.name}
                          onChange={e=>onChange(e)}/>
                  </div>
                  <div className="form-group col-md-6">
                      <label htmlFor="email">Email:</label>
                      <input
                          type="email" 
                          className="form-control" 
                          id="email"
                          name="email"
                          value={user.email}
                          onChange={e=>onChange(e)}/>
                  </div>
                  </div>
                  <button type="submit" className="btn btn-primary" onClick={()=>setIsUpdate(false)}>SAVE</button>
                </form>
                
            </div>
        </Fragment>):
         (<Fragment>
            <div className="detail-container">
                
                <div className="d-flex justify-content-end mb-20"> <button className="btn btn-warning "
                        onClick={()=>setIsUpdate(true)}> UPDATE</button>
                </div>
                
                <div className="row mb-10">
                   <div className=" col-md-6">
                        <div className="detail-label">Full Name:</div>
                        <div className="detail">{`${user.name}`}</div>
                    </div>
                    <div className=" col-md-6">
                        <div className="detail-label">Email:</div>
                        <div className="detail">{`${user.email}`}</div>
                     </div>
                </div>
            </div>
</Fragment>))


const mapStateToProps = (state) => ({
    user: state.user.a_user,
    loading: state.user.loading
})

export default connect(mapStateToProps,{findUser})(UserDetails);

如果有人指出我正确的方向，我将不胜感激。

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

user 数据在编辑会话期间保持不变，因此input 元素无法正常工作。尝试使用 userData 更改其声明：

                  <input
                      type="name"
                      className="form-control"
                      id="name"
                      name="name"
                      value={userData.name}
                      onChange={e=>onChange(e)}/>

更新：为了在user 更改时更新userData 状态，您可以使用这个技巧：

const[userData, setUserData]=useState();

useEffect(
    () => {
        setUserData({
            name: user.name,
            email: user.email,
        });
    },
    [user]
);

注意处理 userData 未定义的初始条件。

【讨论】：

我之前做过，但遇到了不同的问题。我遇到的问题：我第一次选择用户（user1）时，它获取了 user1 的详细信息，然后当我单击 {update} 按钮时，编辑视图显示为一个空表单。当我返回用户列表并单击新用户 (user2) 时，会显示详细信息视图，但是当我单击更新按钮时，编辑表单会显示 user1 的详细信息。并继续这样......我是 REACT HOOKS 的新手，不确定这里的用途，但我相信问题可能来自于此。您如何看待这个问题？
useState 钩子仅在第一次实例化时采用传入的 init 值。如果您在更改源后看到相同的用户，这意味着组件保持不变，沿其状态。话虽如此，不如将user 直接传递给钩子，而是考虑useEffect 观察它，并在更改时更新状态。请参阅我的更新答案。

【解决方案2】：

您的表单输入值应针对 userData 而不是用户，即

<input 
    ...name="name"
    value={userData.name} />

您需要在 useEffect 方法中设置您的 userData，因为似乎对于每个用户，userData 值都在使用之前获取的值。

     useEffect(() => {
    findUser(match.params.id)
    setUserData(user)
    },[])

我猜 findUser 方法会更新父组件中的用户。这应该可以。

【讨论】：