为什么当我尝试在 onchange 处理程序上控制台登录时无法获得正确的状态？

Question

I have problem regarding on getting all the state inside of my HandlerInputChange the data already updated into 10 data however when I console it log inside of my handler it shows the default array value which is 5.

Question: How to get the all the state data inside of my handler?

Goal: To get all the state on my handler

Logs:

My UseState:

const [data, setData] = useState(defaultArray) 

My Handler:

     useEffect(() => {
        console.log("data" , data)
    }, [data])
    
    const handleInputChange = (e, i) => {

        const { name, value } = e.target;

        const list = [...data];

        console.log(list);

    }

Add Rows Function:

const AddRows = () => {

    //loop here the keys listed

    
    let initialKey = 0;

    const x = data.slice(-1);

    initialKey = parseInt(x[0]['key']);

    let newArr=[...Array(5)].map((_,i)=>{

        let val=i + 1 +initialKey;

         return {
            key: ""+val+"",
            customer: <select className="form-control" name="customer" onChange={(e,i) => handleInputChange(e,val)}>
                            <option   disabled selected>Select Customer</option>
                            <option  >LEXI INC / joseph</option>
                            <option  >LEXI INC / james</option>
                            <option  >LEXI INC / charlie</option>
                            <option  >LEXI INC / pam</option>
                            <option >LEXI INC / regorio</option>
                        </select>,
            bank: <select className="form-control" name="bank" onChange={(e,i) => handleInputChange(e,val)}>
                        <option   disabled selected>Select Bank</option>
                        <option >BDO</option>
                        <option  >MAY BANK</option>
                        <option  >EAST WEST BANK</option>
                        <option  >UNION BANK</option>
                        <option  >BPI</option>
                    </select>,
            branch: <input className="form-control" placeholder="Branch" name="branch" onChange={(e,i) => handleInputChange(e,val)}/>,
            checkNo: <input type="number" className="form-control" name="checkNo" placeholder="Check No." onChange={(e,i) => handleInputChange(e,val)}/>,
            checkDate: <input type="date" name="checkDate" className="form-control" onChange={(e,i) => handleInputChange(e,val)}/>,
            amount: <input
                        name="amount"
                        className="form-control"
                        placeholder="Amount"
                        onChange={(e,i) => handleInputChange(e,val)} 
                    />,
            remarks: <select className="form-control" name="remarks" onChange={(e,i) => handleInputChange(e,val)}>
                        <option  disabled selected>Select Remarks</option>
                        <option  >Test</option>
                    </select>
         }
    });

    setData([...data, ...newArr]);


}

Button:

<button type="submit" class="btn btn-danger" onClick={() => AddRows()}>Add Row</button>

Answer 1

Your handleInputChange is not the problem. Normally, it will be return an array with 10 elements like the variable defaultArray.

perhaps the problem is line 1 and 3