React redux - 输入字段不允许我输入

Question

所以我有 3 个输入字段，一个用于姓名、电子邮件和密码。电子邮件和密码输入字段工作正常，但名称输入字段不允许我输入任何内容。我将输入字段的值设置为来自用户，因此它会自动填充字段。这是我的代码

    import React, {useState, useEffect} from 'react';
    import {useParams} from 'react-router-dom';
    import {connect} from 'react-redux';
    import {editUserData, fetchUserData, deleteProfile} from '../actions/index';

    const EditUser = props => {
        const [user, setUser] = useState({name: '', email: '', password: ''})
        const params = useParams();
        
        const editUser = e => {
            e.preventDefault();
            props.editUserData(params, user);
        }

        const handleChanges = e => {
            e.persist();
            setUser({...user, [e.target.name]: e.target.value});
        }

        useEffect(() => {
            props.fetchUserData(params, setUser);
        }, [])

        const deleteOnClick = () => {
            props.deleteProfile(params)
        }
        
            return (
                <>
                <form className='editUserForm' onSubmit={editUser}>
                    <h3>Edit Profile !</h3>
                    <div>Name</div>
                    <input className='editInput' type='text' name='name' value={`${user.firstName} ${user.lastName}`} onChange={handleChanges} /> 
                    <div>Email</div>
                    <input className='editInput' type='text' name='email' value={user.email} onChange={handleChanges} />
                    <div>Password</div>
                    <input className='editInput' type='text' name='password' value={user.password} onChange={handleChanges} />
                    <button className='submitButton'>Submit</button>
                </form>
                <div className='deleteProfile'>
                    <button className='deleteProfileButton' onClick={deleteOnClick}>Delete Profile</button>
                </div>
                </>
            )
    }

    const mapStateToProps = state => {
        return {
            users: [], 
            user: {}, 
            registerSuccessMessage: '',
            user_stories: {}, 
            isLoading: false, 
            error: null 
        }
    }

    export default connect(mapStateToProps, {editUserData, fetchUserData, deleteProfile})(EditUser);

编辑（根据@Boussadjra 的建议）

这是 props.fetchUserData 之后的状态。 -- 其中 setUser 是 -- 这就是我向 ${user.firstName} ${user.lastName}

输入值的原因

Answer 1

这是因为您将“名称”input 的value 设置为${user.firstName} ${user.lastName}，即undefined。您可以将user 状态设置为最初具有这些属性，但我建议为firstName、lastName、email 和password 中的每一个使用单独的useState()（因为结合了第一个和最后一个如 cmets 中所述，单个 input 中的名称容易出错）：

import React, {useState, useEffect} from 'react';
import {useParams} from 'react-router-dom';
import {connect} from 'react-redux';
import {editUserData, fetchUserData, deleteProfile} from '../actions/index';

const EditUser = props => {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const params = useParams();
    
    const editUser = e => {
        e.preventDefault();
        props.editUserData(params, user);
    }

    useEffect(() => {
        props.fetchUserData(params, setUser);
    }, [])

    const deleteOnClick = () => {
        props.deleteProfile(params)
    }
    
        return (
            <>
            <form className='editUserForm' onSubmit={editUser}>
                <h3>Edit Profile !</h3>
                <div>First Name</div>
                <input className='editInput' type='text' name='firstName' value={firstName} onChange={e => setFirstName(e.target.value)} />
                <div>Last Name</div>
                <input className='editInput' type='text' name='lastName' value={lastName} onChange={e => setLastName(e.target.value)} /> 
                <div>Email</div>
                <input className='editInput' type='text' name='email' value={email} onChange={e => setEmail(e.target.value)} />
                <div>Password</div>
                <input className='editInput' type='text' name='password' value={password} onChange={e => setPassword(e.target.value)} />
                <button className='submitButton'>Submit</button>
            </form>
            <div className='deleteProfile'>
                <button className='deleteProfileButton' onClick={deleteOnClick}>Delete Profile</button>
            </div>
            </>
        )
}

const mapStateToProps = state => {
    return {
        users: [], 
        user: {}, 
        registerSuccessMessage: '',
        user_stories: {}, 
        isLoading: false, 
        error: null 
    }
}

export default connect(mapStateToProps, {editUserData, fetchUserData, deleteProfile})(EditUser);

Answer 2

user.firstName 和 user.lastName 未定义，它们未定义为 user 状态中的属性，因此您应该简单地使用 firstName 和 lastName 属性作为值：

 value={ us}

或如下定义您的状态：

 const [user, setUser] = useState({firstName:'',lastName:'', email: '', password: ''})

我们假设名字和姓氏用空格隔开，所以当您更新状态时拆分该名称：

  const handleChanges = e => {
        e.persist();
       if(e.target.name==='name'){
           let name=e.target.value.split(' ')
           setUser({...user, firstName:name[0],lastName:name[1]});
        }else{
        setUser({...user, [e.target.name]: e.target.value});
        }
    }