Javascript 如何获取要更新的状态

我有一个学校项目的目录类型程序-它拉入一些数组，并将这些数组与用户输入创建的数组连接起来。唯一的问题是，他们的状态总是落后于1，因此如果您将计数器增加到5并提交，它将返回4。有什么想法吗

const Booking = ({currentId}) => {
    const dispatch = useDispatch();
    
    const user = JSON.parse(localStorage.getItem('profile'));
    const users = useSelector((state) => state.users);
    const filteredRentals = users.filter((users)=> users._id === user?.result?._id);

    const rentedArr = filteredRentals[0].rentedProducts;
    const numbArr = filteredRentals[0].numberOfProducts;

    const [userRental, setUserRental] = useState({rentedProducts:'', numberOfProducts:0});
    const [newRental, setNewRental] = useState({rentedProducts:rentedArr, numberOfProducts:numbArr});

    const userID = user?.result?._id;
    const newRented = rentedArr.concat(userRental.rentedProducts);
    const newNumb = numbArr.concat(userRental.numberOfProducts);

    const handleSubmit = (e) => {
        e.preventDefault();

        if(currentId){
            dispatch(updateRentals(userID, newRental));
        } else {
            console.log('No product found');
        } clear();
    }

    const clear = () =>{
        setUserRental({rentedProducts:'', numberOfProducts:0})
    }

    const changeHandler = (e) => {
        setUserRental({...userRental, numberOfProducts: e.target.value, rentedProducts: product.title});
        setNewRental({...newRental, numberOfProducts: newNumb, rentedProducts: newRented});
    }
    return(
        <div className='booking-panel-wrap'>
            <h3>Book an Item</h3>
            <form onSubmit={handleSubmit}>
                <label htmlFor="inStock">Units Required:
                    <input type="number" required min="0" name="inStock" onChange={(e) => changeHandler(e)}/>
                </label>
                <button type="submit" className='btn-white'>Submit</button>
            </form>
        </div>
    )
    
}

export default Booking;

const Booking=（{currentId}）=>{
const dispatch=usedpatch（）；
const user=JSON.parse（localStorage.getItem（'profile'）；
const users=useSelector（（state）=>state.users）；
const filteredentals=users.filter（（users）=>users.\u id==user？.result？\u id）；
const rentedArr=FiltereRentals[0]。rentedProducts；
const numbArr=filteredRentals[0]。numberOfProducts；
const[userRental，setUserRental]=useState（{rentedProducts:''，numberOfProducts:0}）；
const[newrent，setnewrent]=useState（{rentedProducts:rentedArr，numberOfProducts:numbArr}）；
const userID=user？.result？\u id；
const newRented=rentedArr.concat（userrent.rentedProducts）；
const newNumb=numbArr.concat（userrent.numberOfProducts）；
常量handleSubmit=（e）=>{
e、 预防默认值（）；
如果（当前ID）{
分派（更新的用户ID，新租赁）；
}否则{
console.log（“未找到产品”）；
}清除（）；
}
常数清除=（）=>{
setUserRental（{rentedProducts:''，numberOfProducts:0}）
}
常量changeHandler=（e）=>{
setUserRental（{…userRental，numberOfProducts:e.target.value，rentedProducts:product.title}）；
SetNewRent（{…NewRent，numberOfProducts:newNumb，rentedProducts:NewRened}）；
}
返回(
预订物品
所需单位：
changeHandler（e）}/>
提交
)
}
导出默认预订；
changeHandler
中的
newNumb
和
newRented
都依赖于
userrent
setuserrent
在下一次渲染时更新
userrent
，当前
userrent
在调用
setuserrent
后不会更改。因此，
newNumb
和
newrenred
的值不正确（过时），应在
changeHandler
中重新评估

const changeHandler = (e) => {
  // store the new `userRental` in a variable, before passing it to `setUserRental()`
  const newUserRental = {...userRental, numberOfProducts: e.target.value, rentedProducts: product.title};
  setUserRental(newUserRental);

  // build `newRental` based on the new value of `userRental` (stored in the `newUserRental` variable)
  const newNumb = numbArr.concat(newUserRental.numberOfProducts);
  const newRented = rentedArr.concat(newUserRental.rentedProducts);
  setNewRental({...newRental, numberOfProducts: newNumb, rentedProducts: newRented});
};

上述情况可能比实际情况更为复杂。状态
newrent
可能会被删除（或更改为
usemo
），这大大简化了事情

在下面的示例中，我完全删除了
newrent
状态，并将对象构建为提交操作的一部分

const Booking = ({currentId}) => {
    const dispatch = useDispatch();
    
    const user = JSON.parse(localStorage.getItem('profile'));
    const userID = user?.result?._id;
    const users = useSelector((state) => state.users);
    // If you only need the first match of a `filter()` result, use `find()` instead.
    // `filteredRental` is only used inside `handleSubmit()` so should probably be moved there.
    const filteredRental = users.find((user) => user._id === userID);

    const [userRental, setUserRental] = useState({ rentedProducts: '', numberOfProducts: 0 });

    const handleSubmit = (e) => {
        e.preventDefault();

        if (currentId) {
            // don't store the newRental in a state, but build it during submit
            const newRental = {
                rentedProducts: filteredRental.rentedProducts.concat(userRental.rentedProducts),
                numberOfProducts: filteredRental.numberOfProducts.concat(userRental.numberOfProducts);
            };
            dispatch(updateRentals(userID, newRental));
        } else {
            console.log('No product found');
        } clear();
    }

    const clear = () =>{
        setUserRental({rentedProducts:'', numberOfProducts:0})
    }

    const changeHandler = (e) => {
        setUserRental({...userRental, numberOfProducts: e.target.value, rentedProducts: product.title});
    }
    
    // ...
}

export default Booking;

@3limin4t0r您建议我怎么做？