Question

我在获取 HandlerInputChange 中的所有状态时遇到问题，数据已经更新为 10 个数据，但是当我控制台它登录到我的处理程序中时，它显示了默认数组值，即 5。

问题：如何获取处理程序中的所有状态数据？

目标：让我的处理程序获得所有状态

日志：

我的使用状态：

const [data, setData] = useState(defaultArray)

我的处理程序：

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

        const { name, value } = e.target;

        const list = [...data];

        console.log(list);

    }

添加行函数：

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

Answer 1

你的 handleInputChange 不是问题。通常，它会像变量 defaultArray 一样返回一个包含 10 个元素的数组。

perhaps the problem is line 1 and 3

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

1 个答案: