Question

此代码是一个功能组件，应根据 isUpdate 的状态呈现用户详细信息页面（显示详细信息视图）或用于编辑此用户信息的表单（编辑详细信息视图）。没问题，因为更新和保存按钮更改了 isUpdate < / strong> 分别渲染“编辑视图”或“显示视图”。

当我选择一个用户时，页面会通过 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);

请任何人向正确的方向指点我，我将不胜感激。

Answer 1

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

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

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

const[userData, setUserData]=useState();

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

请谨慎处理未定义userData的初始条件。

Answer 2

您的表单输入值应以userData而不是用户为目标

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

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

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

我猜想findUser方法更新了父组件中的用户。这应该起作用。

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

2 个答案: