React-Redux：将数量值添加到 order/cart 中的 table

Question

我正在尝试创建采购订单屏幕，但在添加产品数量时遇到问题。

工作流程 a) 从状态中获取产品详细信息并进入下拉列表。 Select 下拉列表中的产品 b) 在文本字段中添加数量。点击添加 c)这会将产品详细信息添加到 table.

但是我不确定如何为每个选择的产品设置一个固定数量。

现在我不确定如何将数量添加到所选产品中。对不起，代码可能搞砸了，我还在学习中。添加下面的代码。

let count=0;
    const [validated, setValidated] = useState(false);
    const dispatch = useDispatch()
    const [medicineName, setMedicineName] = useState('')
    const [quantity, setQuantity] = useState(0)
    const [tableData, setTableData] = useState([])

    const productList = useSelector( state => state.productList )
    const { loading, error, products } = productList
    
    const userLogin = useSelector(state => state.userLogin)
    const {userInfo} = userLogin

    const [dropDownData, setDropDownData] = useState(products)

    useEffect(()=>{
           setDropDownData(products)
        },[products])

    useEffect(() => {

        if(!userInfo){
            history.push('/login')
        }
        
        dispatch(listProducts())

    },[dispatch, history, userInfo])

    const submitHandler = (e) => {
        e.preventDefault()
        const arr = dropDownData.filter((product) => 
            product.medicineName.toLowerCase().indexOf(medicineName.toLowerCase()) > -1)
        
        setTableData(tableData => tableData.concat(arr))
        const arr2 = dropDownData.filter((product) => 
            product.medicineName.toLowerCase().indexOf(medicineName.toLowerCase()))
        
        setDropDownData(arr2)
        
    }

return(
        <>
        <h2>PurchaseOrderScreen</h2>
        
        <Form onSubmit={submitHandler} validated={validated} noValidate>
        <Row>
            <Col md={7}>
                <Form.Group controlId='medicineName'>
                    <FloatingLabel controlId="floatingSelect" label="Medicine">
                        <Form.Control as='select' value={medicineName} className="mb-3"
                                onChange={(e) => setMedicineName(e.target.value)}
                                required
                                >
                                <option value=''>Select Medicine</option>
                                {dropDownData.map(product => (
                                    <option value={product.medicineName}>{product.medicineName}</option>
                                ))  }
                            </Form.Control>
                        </FloatingLabel>
                        
                </Form.Group>
            </Col>
            <Col md={3}>
                <Form.Group className="mb-3" controlId='quantity'>
                    <FloatingLabel controlId="floatingInput" label="Quantity" >
                        <Form.Control   type="text"  placeholder="Quantity"
                                        value={quantity}
                                        onChange = {(e)=> setQuantity(e.target.value)}
                                        required 
                                    />
                    </FloatingLabel>
                    </Form.Group>
            </Col>
            <Col md={2}>
                <Button type='submit' variant='primary'>
                    >Add
                </Button>
            </Col>
        </Row>
        </Form>

        <Table striped bordered hover responsive='md' className='table-sm mt-3' id="table-to-xls">
                        <thead>
                            <tr>
                                <th><span className='btn'>Remove</span></th>
                                <th ><span className='btn'>Sl</span></th>
                                <th ><span className='btn'>Medicine</span></th>
                                <th ><span className='btn'>C.stock</span></th>
                                <th ><span className='btn'>Quantity</span></th>
                                <th ><span className='btn'>Low Stock</span></th>
                                <th ><span className='btn'>Reorder Quantity</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            {tableData.map(product => (
                                    <tr key={product._id} >
                                        <td> X </td>
                                        <td>{count+1}</td>
                                        <td>{product.medicineName}</td>
                                        <td>{product.currentStock}</td>
                                        <td>{quantity}</td>
                                        <td>{product.lowStockValue}</td>
                                        <td>{product.reOrderValue}</td>
                                    </tr>
                                )) }
                        </tbody>                        
                </Table>

请问如何增加数量。如果您需要任何详细信息，请告诉我。

Answer 1

为了将数量添加到 table，您需要将其存储在某处。您有一个名为 tableData 的数组，您当前正在向其中添加产品。也许您可以添加一个对象而不是添加产品：

// Inside the submitHandler function
const productToAdd = dropDownData.find((product) =>
   product.medicineName.toLowerCase().indexOf(medicineName.toLowerCase()) > -1);
const rowToAdd = {product: productToAdd, quantity: quantity};
setTableData(tableData => [...tableData, rowToAdd])

然后在您的渲染中：

{tableData.map(row => (
  <tr key={row.product._id} >
    <td> X </td>
    <td>{count+1}</td>
    <td>{row.product.medicineName}</td>
    <td>{row.product.currentStock}</td>
    <td>{row.quantity}</td>
    <td>{row.product.lowStockValue}</td>
    <td>{row.product.reOrderValue}</td>
  </tr>
)) }

React-Redux：将数量值添加到 order/cart 中的 table

React-Redux: Add quantity value to a table in order/cart

javascript

node.js

reactjs

redux

react-hooks