final-form / final-form-calculate

Decorator for calculating field values based on other field values in 🏁 Final Form
MIT License
113 stars 26 forks source link

update is not a function #30

Closed crobinson42 closed 5 years ago

crobinson42 commented 5 years ago

Are you submitting a bug report or a feature request?

bug

What is the current behavior?

I have many working <Form /> components in a react-native (v0.60) app - as soon as I add decorators prop to Form, i get this error, "update is not a function":

decorators={[
            createDecorator({
              field: 'department', // when the value of department changes...
              updates: {
                // ...set field value
                subDepartment: -1,
              },
            }),
          ]}

What is the expected behavior?

For the decorators to work as expected.

What's your environment?

"final-form": "^4.18.1", "final-form-calculate": "^1.3.1", "final-form": "^4.18.1", "final-form-calculate": "^1.3.1",

Other information

Looks to be the culprit here, but not sure why: https://github.com/final-form/final-form-calculate/blob/bac6a750b7de1c1614996207d0e42ac3958c402d/src/decorator.js#L39

The stack trace only points to the line where <Form /> is declared in the error:

Screenshot 2019-07-26 06 45 25

Here is a simple reproducible code snippet one could paste into the App.js file with a new react-native init rffDemo project from the cli:

import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';
import createDecorator from 'final-form-calculate';
import { Field, Form } from 'react-final-form';

export default class App extends Component {
  render() {
    return (
      <Form
        onSubmit={() => {}}
        decorators={[
          createDecorator({
            field: 'name', // when the value of department changes...
            updates: {
              // ...set field value
              last: 'something',
            },
          }),
        ]}
        render={({ handleSubmit }) => (
          <View>
            <Field
              name="name"
              render={({ input }) => (
                <TextInput value={input.value} onChangeText={input.onChange} />
              )}
            />
          </View>
        )}
      />
    );
  }
}
crobinson42 commented 5 years ago

I'm a tard. I was copy-pasting an old codesandbox from erikras and not using the latest API for final-form-calculate :-(

I need to pass a function to the field i'm updating.