React-Redux：将数量值添加到订单/购物车中的表格

Question

I am trying to create a purchase order screen and I am facing issues while adding the quantity of the product.

Workflow a)Fetch the product details from state and get in the drop down. Select the product from drop down b)Add the quantity in the text field. Click on Add c)This will add the product details to a table.

But I am not sure how to set a constant quantity for each product selected.

Now when I am not sure how to add the quantity to the product selected. Sorry, the code might be messed up, I am still learning. Adding the code below.

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>

Can you please let me know how the quantity can be added. Please let me know if you need any details.

Answer 1

In order to add the quantity to the table, you need to store it somewhere. You have an array called tableData that you currently are adding your products to. Maybe instead of adding the products, you could add an object:

// 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])

and then later in your render:

{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>
)) }