jaredpalmer / formik

Build forms in React, without the tears 😭
https://formik.org
Apache License 2.0
33.98k stars 2.79k forks source link

Not Receiving update values instead receiving all valus passed to initialValues #1729

Closed developerk786 closed 4 years ago

developerk786 commented 5 years ago

🐛 Bug report

Current Behavior

import React, { useState } from "react"
...
import { withFormik } from "formik"
...

import BasicInformation from "./BasicInformation/BasicInformation"

const ProductEdit = props => {
  const {
    values,
    handleSubmit,
    handleChange,
    handleBlur,
    setFieldValue,
  } = props
  return (
    <View style={{ backgroundColor: "#eee", flex: 1 }}>
          <BasicInformation
            values={values}
            handleChange={handleChange}
            handleBlur={handleBlur}
          />
          <View style={{ alignItems: "center" }}>
            <Button rounded onPress={handleSubmit} text="Update Product" />
          </View>
    </View>
  )
}

export default withFormik({
  mapPropsToValues: ({ product }) => product,
  handleSubmit: (values, ...rest) => {
    const updateValues = { ...values }
    console.log({ updateValues, rest })
  },
  enableReinitialize: true,
})(ProductEdit)

updatedValue outputs=> 
{
  "comments": {
    "cjyqq5n0c000f0744moem3kng": {
      "id": "cjyqq5n0c000f0744moem3kng",
      "title": "Awesome Fabrics",
      "body": "awesome products  inodo western touch and feel good and affordable in prices.",
      "rating": 4,
      "createdAt": "2019-07-31T04:02:50.913Z",
      "user": {
        "name": "Mike Henry",
        "image": "/users/cjy41zhvg00ws0714jp9z7p84.jpg",
        "__typename": "User"
      },
      "__typename": "Comment"
    },
    "cjyqq94mc000r0744909owez6": {
      "id": "cjyqq94mc000r0744909owez6",
      "title": "Good in Fabrics",
      "body": "Good products and affordable i prices",
      "rating": 5,
      "createdAt": "2019-07-31T04:05:33.731Z",
      "user": {
        "name": "Mike Henry",
        "image": "/users/cjy41zhvg00ws0714jp9z7p84.jpg",
        "__typename": "User"
      },
      "__typename": "Comment"
    },
    "cjyqqd6mr001607444pqmkuvf": {
      "id": "cjyqqd6mr001607444pqmkuvf",
      "title": "Fabircs Good!!",
      "body": "Affordable price and fabrics good as i expected",
      "rating": 5,
      "createdAt": "2019-07-31T04:08:42.963Z",
      "user": {
        "name": "Danny's",
        "image": "/users/cjybvfx28001s0714ssf836rejpg",
        "__typename": "User"
      },
      "__typename": "Comment"
    },
    "cjyqqf1eb001i0744ux9edtiv": {
      "id": "cjyqqf1eb001i0744ux9edtiv",
      "title": "Just Good!",
      "body": "Price is good but fabrics is not too good but it is as i expected",
      "rating": 2,
      "createdAt": "2019-07-31T04:10:09.490Z",
      "user": {
        "name": "Danny's",
        "image": "/users/cjybvfx28001s0714ssf836rejpg",
        "__typename": "User"
      },
      "__typename": "Comment"
    },
    "cjyqqjdgl00280744ptono3cm": {
      "id": "cjyqqjdgl00280744ptono3cm",
      "title": "Good Products",
      "body": "Gooo facbircs touch and feel good and came as i expectedi",
      "rating": 5,
      "createdAt": "2019-07-31T04:13:31.726Z",
      "user": {
        "name": "Danny's",
        "image": "/users/cjybvfx28001s0714ssf836rejpg",
        "__typename": "User"
      },
      "__typename": "Comment"
    }
  },
  "selectedVariation": {
    "id": "cjytn7n3d009o0744q9yxp357",
    "color": "White",
    "sizes": [
      {
        "id": "cjytn7n7p009p0744bf0fc606",
        "name": "S",
        "quantity": 2,
        "__typename": "Size"
      },
      {
        "id": "cjytn7n84009q07449e1kfq3h",
        "name": "M",
        "quantity": 5,
        "__typename": "Size"
      }
    ],
    "images": [
      "/products/kurti/indo-western-kurti/white-rose-indo-western-design-kurti-rose-red.jpg",
      "/products/kurti/indo-western-kurti/white-rose-indo-western-design-kurti-rose-red.jpg"
    ],
    "__typename": "Variation"
  },
  "id": "cjympfor400hp0744jr9wuct4",
  "name": "White Rose Indo Western Design Kurti",
  "price": 2500,
  "sellerPrice": "2000",
  "discountPercent": 4,
  "returnableSKMoney": 40,
  "description": "Some Description",
  "deliveryWithin": "All Nepal",
  "isSkMoneyUsable": false,
  "category": {
    "name": "kurti",
    "__typename": "Category"
  },
  "subCategory": {
    "name": "indo-western",
    "__typename": "SubCategory"
  },
  "dispatchDuration": "WITHIN_24_HOURS",
  "deliveryDuration": "WITHIN_2_DAYS",
  "tags": [
    {
      "name": "hot",
      "__typename": "Tag"
    },
    {
      "name": "trending",
      "__typename": "Tag"
    }
  ],
  "variations": [
    {
      "id": "cjytn7n3d009o0744q9yxp357",
      "color": "White",
      "sizes": [
        {
          "id": "cjytn7n7p009p0744bf0fc606",
          "name": "S",
          "quantity": 2,
          "__typename": "Size"
        },
        {
          "id": "cjytn7n84009q07449e1kfq3h",
          "name": "M",
          "quantity": 5,
          "__typename": "Size"
        }
      ],
      "images": [
        "/products/kurti/indo-western-kurti/white-rose-indo-western-design-kurti-rose-red.jpg",
        "/products/kurti/indo-western-kurti/white-rose-indo-western-design-kurti-rose-red.jpg"
      ],
      "__typename": "Variation"
    },
    {
      "id": "cjytn7n8b009r0744z0sf0pws",
      "color": "Hot Pink",
      "sizes": [
        {
          "id": "cjytn7n8p009s07444m10h7fs",
          "name": "S",
          "quantity": 8,
          "__typename": "Size"
        },
        {
          "id": "cjytn7n8x009t07445ybb3nva",
          "name": "L",
          "quantity": 3,
          "__typename": "Size"
        }
      ],
      "images": [
        "/products/kurti/indo-western-kurti/white-rose-indo-western-design-kurti-rose-red.jpg",
        "/products/kurti/indo-western-kurti/white-rose-indo-western-design-kurti-rose-red.jpg"
      ],
      "__typename": "Variation"
    }
  ],
  "__typename": "Product"
}

Expected behavior

Since i changed only the price field so i should get

updateValeus => 
{
  price: 1850,
}

Suggested solution(s)

provide another argument to handleSubmit function that tracks only updated fields.


...
handleSubmit = (allValues, { updatedValues, props }) => {

}  
...

Your environment

Software Version(s)
Formik 1.5.8
React 16.8.6
TypeScript No
Browser Chrome
npm/Yarn Yarn
Operating System Ubuntu 18.04
maddhruv commented 4 years ago

Hey @developerk786 we highly recommend you to not share any kind of data in open github issues, if the data you shared in the above description is a sensitive information.

Although I tried reproducing the above snippet, but I am getting all the form values, which is the expected scenario, feel free to re-open if there is still an issue.

For more info, refer - https://formik.org/docs/api/withFormik#handlesubmit-values-values-formikbag-formikbag--void--promiseany