html - 如何更新我的输入以确保它具有最新值
问题描述
我有一个名为 react 的组件productsTable
,用户可以在其中指定他们想要的商品数量,然后将其添加到购物车中。我正在使用一个input
字段来允许他们输入产品数量。我遇到的问题是,如果用户输入输入字段的值并单击每个产品的添加到购物车,则 setState 将具有的值是输入字段中输入的最后一个值,而不是具有单个输入字段值。发生这种情况的原因是我使用的方式在输入setState
中更新onChange
。关于我能做些什么来解决这个问题的任何想法。我在想也许把它input
作为它自己的单独组件,所以每个人都product
可以得到它自己的实例input
。代码在下面。
import { Table, Button } from 'react-bootstrap';
import { useDispatch, useSelector } from 'react-redux';
import { useEffect, useState } from 'react';
import { getAllProducts } from '../../redux/actions/productActions';
import { sortBy } from 'lodash';
import { toast } from 'react-toastify';
import { addToCart } from '../../redux/actions/shoppingCartActions';
const ProductsTable = ({ searchTerm }) => {
const userInfo = JSON.parse(localStorage.getItem('userInfo')) || {};
const dispatch = useDispatch();
const [input, setInput] = useState(0);
const cartId = useSelector((state) => state.cartStatus.cartInfo.cartId);
const handleAdd = (product, input) => {
const isBadInput = validateInput(input);
if (isBadInput) {
toast.error('Invalid product amount', {
position: toast.POSITION.TOP_CENTER,
autoClose: 1200,
});
return;
}
const myProduct = {
productAmount: input,
...product,
userId: userInfo.userId,
cartId: cartId,
};
dispatch(addToCart(myProduct));
toast.success('Product added successfuly', {
position: toast.POSITION.TOP_CENTER,
autoClose: 1500,
});
};
useEffect(() => {
dispatch(getAllProducts());
}, []);
const products = useSelector((state) => state.productReducer.products);
const sortedProducts = sortBy(products, ({ productName }) =>
productName.toLowerCase()
);
const validateInput = (inputValue) => {
let value = parseInt(inputValue, 10);
if (value < 0) {
return true;
} else {
value = value >= 0 ? value : 0;
setInput(value);
}
};
return (
<div className='col-9'>
<Table striped bordered hover>
<thead>
<tr>
<th>Product Name</th>
<th>Product Price</th>
<th>Seller</th>
<th>Amount In Stock</th>
<th>Amount To Purchase</th>
<th></th>
</tr>
</thead>
<tbody>
{sortedProducts.length > 0 &&
sortedProducts
.filter((product) => {
const { productName } = product;
if (searchTerm === '') {
return product;
}
if (productName.toLowerCase().includes(searchTerm)) {
return product;
}
})
.map((product) => {
return (
<tr key={product.id}>
<td>{product.productName}</td>
<td>{product.productPrice}</td>
<td>Seller </td>
<td>{product.productInStock}</td>
<td>
<input
type='number'
name='input'
step='1'
onChange={(event) => setInput(event.target.value)}
/>
</td>
<td>
<Button
onClick={() => handleAdd(product, input)}
variant='primary'
>
Add To Cart
</Button>
</td>
</tr>
);
})}
</tbody>
</Table>
</div>
);
};
export default ProductsTable;
解决方案
对于那些遇到类似问题的人,我将该input
字段移动到它自己的组件中并在productsTable
组件中调用它。这样,每个产品都有一个单独的输入字段。我有一种感觉,本来可以,但在我自己尝试之后,我能够证明它。
推荐阅读
- python - 使用PHP执行脚本时python打开csv文件的问题
- html - 背景有2种水平颜色,一种比另一种宽,请看照片
- javascript - 从多维 JSON 数组中获取正确的值
- reactjs - DC.JS 可滚动行图,在 React 中没有间隙
- dafny - Dafny 认为奇数相乘并不总是得出奇数结果
- reactjs - 在异步回调中卸载和 useState
- composer-php - 将 TYPO3 站点移动到没有 Composer 的服务器
- python - 收件人列表没有在 django 中获取电子邮件地址
- r - geom_bar 中的 aes(group = x) 如何计算比例?
- firebase - 更改域时保持用户登录(Firebase 身份验证)