redux-form: [v6] rc.1 FieldArray.remove + immutable causes "TypeError: list.splice is not a function"

const renderBranchs = ({fields}) => {
  return (
    <section>
      <ButtonToolbar>
        <Button onClick={() => fields.push(Immutable.Map({}))}>Add Branch</Button>
      </ButtonToolbar>
      <br/>
      {
        fields.length > 0 ?
        (
          <Well>
            {fields.map((branch, index) =>
              <li key={index}>
                <Button
                  type="button"
                  title="Remove Branch"
                  onClick={() => fields.remove(index)}>
                  Remove
                </Button>
                <h4>Branch #{index + 1}</h4>
                <Field
                  controlId={`${branch.controlId}Name`}
                  name={`${branch}.name`}
                  type="text"
                  component={InputField}
                  placeholder="Name"
                  label="Name"/>
              </li>
            )}
          </Well>
        ) : null
      }
    </section>
  );
};

I got the issue when I add a field, touch the field and try to remove it.

version: “v6.0.0-rc.1”

https://github.com/erikras/redux-form/blob/v6.0.0-rc.1/src/structure/immutable/index.js#L17 I was trying to debug the issue. structure.splice functoin was called twice. For the second structure.splice function call, the variable list was a Immutable.Map instead of a Immutable.List

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 15 (5 by maintainers)

Most upvoted comments

I believe this should be fixed by my PR #1716. The problem is that when you “touch” a field in a field array immutable-js’ setIn method initializes the state like this:

{
  fields: {
    collection: {
      "0": { touched: true }
    }
  }
}

Instead of what it expects:

{
  fields: {
    collection: [
      { touched: true }
    ]
  }
}

Either we need to stop relying on FieldArray values being indexed numerically in an array-like structure or we need to implement something like my PR has, which is to ensure array paths are created ahead of time so immutable-js can’t take liberties when it creates the deep nested structure.

Reanmachine on Sep 7, 2016

@erikras, any solution ???

marcosideame on Aug 23, 2016

Confirming that it’s still happening in v6.0.2 I haven’t tested but hoping @Reanmachine’s PR will fix it!

igorbarbashin on Sep 8, 2016