javascript - React Redux 无法在该字段中键入值时更新输入字段

Question

我在另一个组件中有一个编辑按钮。单击该按钮时，我正在调度操作 editData() ，其中我将 id 作为有效负载传递，并将该 id 设置在我的全局存储变量中。

现在在这个组件中，我首先从存储中获取整个数据列表，然后获取我想要应用编辑的特定 obj 的 id。

现在从基于 id 的整个数据中检索该对象。

然后最初使用 useState() 挂钩，我在输入字段中设置了该特定对象值。

我使用了 useEffect() 钩子，因为每当用户单击特定记录时，都应该在输入字段中放置这些对象数据。

现在，当我尝试在输入字段中键入任何数据时设置这些数据后，它不会在 UI 中显示更新。

useState 和 useEffect 有什么问题。

import React, {useState, useEffect} from 'react'
import styles from './allCss.module.css'
import { useSelector, useDispatch } from 'react-redux'
import { updateData } from '../redux_files/ActionCreator'

const EditCustomer = () => {

     const wholeData = useSelector( state => state.delUpdReducer )
     const currentId = wholeData.edit_data_id
     const listOfData = wholeData.list_of_data
    //   console.log(currentId)
    //   console.log(listOfData)

    const currentUser = listOfData.filter( (obj) => {
        return obj.id === currentId
    } )
    //console.log(currentUser[0])

    //{id:1,fname:'sample',lname:'sample',no_of_purchase:12,amount:12}
    //{id:'',fname:'',lname:'',no_of_purchase:'',amount:''}
    
    const [ initialObj , setInitialObj ] = useState({...currentUser[0]})
    //console.log("initial obj",initialObj)

    useEffect( ()=>{
        setInitialObj(currentUser[0])
    },[currentUser])

    const dispatch = useDispatch()


    const handleChange = (e) =>{
        e.preventDefault();
        setInitialObj({ ...initialObj, [e.target.name] : e.target.value  })
    }

    const handleSubmit = (e) =>{
        e.preventDefault();
        //setInitialObj({...initialState,})
    }

    return(
        <div className="container ">
            <h3> Edit Customer Details </h3>
            <hr/>
            <form onSubmit={handleSubmit} >

                <label className= {`${styles.label_style} mx-2 `}>First Name: </label>
                <input type="text" placeholder="Enter First Name" 
                className={`${styles.input_style} ` } 
                name="fname" value={initialObj.fname} 
                onChange={handleChange}
                />
                <br/>
              
                <label className= {`${styles.label_style} mx-2`}>Last Name:</label>
                <input type="text" placeholder="Enter Last Name"  
                className={styles.input_style} 
                name="lname" value={initialObj.lname} 
                onChange={handleChange} 
                />
                <br/>

                <label className= {`${styles.label_style} mx-2`}>No of Items:</label>
                <input type="text" placeholder="Enter No of Items" 
                className={styles.input_style} name="no_of_purchase" 
                value={initialObj.no_of_purchase} 
                onChange={handleChange}
                />
                <br/>

                <label className= {`${styles.label_style} mx-2`}>Amount:</label>
                <input type="text" placeholder="Enter Amount"  
                className={styles.input_style} name="amount" 
                value={initialObj.amount} 
                onChange={handleChange}
                />
                <br/>
                <br/>
                <button className="btn btn-primary" 
                onClick={ () => { dispatch( updateData( {id:currentId, userDetails : initialObj} ) )} } >
                Update
                </button>

            </form>
        </div>
    )
}

export default EditCustomer

标签： javascriptreactjsreduxreact-redux