Can't update an input value inside specific array item in redux

Question

I am working in a react-native projetc and i don't understand very well Redux. I need help.:D We got it an array of objects like:

lines[
    {"cant":2, "ref":"bar"}, {"cant":5, "ref":"foo"}
]

Every line is a card information. These cards have inputs (cant, ref) to change its values. The entire object is:

obj:{
  "a": '',
  "b": '',
  "lines": [
    {"cant":2, "ref":"bar}",
    {"cant":5, "ref":"foo"}
  ]
}

When user inserts some value in some input it called onChangeText().

    <Input
        placeholder="Cant"
        value={this.props.newOrder.lines[index].cant}
        onChangeText={(text)=> {
            this.props.onChangeCant({"cant":text,"index":index});
        }}
    />

Meanwhile in the Reducer (we use react-addons-update):

case ON_CHANGE_CANT:
        return update(state, {
          lineas: {
            [action.payload.index]: {
              cant: {$set: action.payload.cant}
            }
          }
        });

Everything is OK except only it updates only one character. For example: Cant: 1. Then input focus is missing. If you type: Cant: 22. only it updates 2. Doesn't matter if it types faster. Only update the first character you typing. We suspect the behaviour of Redux is the problem but we don't know why.

We tried to use debounce(lodash) but we have not succeeded

Any idea please?

Thank you so much! and i hope it understands my explanation.

Rockandbit

Noticed that `lines` is an array, but in your reducer you are treating it as if it were an object. — Rick Jolly, Nov 06 '17 at 18:41
Are you creating your Inputs with a map? Problem may be because of the re-render of the component. Since props are changing it is triggering a re-render and if you are not using `key` prop that may lead to lose focus of the input. — bennygenel, Nov 06 '17 at 20:26
Yes. I know @RickJolly . I read that solution https://stackoverflow.com/questions/35628774/how-to-update-single-value-inside-specific-array-item-in-redux . I tried your solution and it gives an error "You provided a key path to update() that did not contain one of $push, $unshift, ..." . Thanx for response ;) — rockandbit, Nov 07 '17 at 07:40
@Aaqib i tried this example https://stackoverflow.com/a/41215941/4774393 debounce works correctly but in the function onChangeText(text) can't access to this.props..cause is undefined ... and i don't know why ..:( .. thanx for response ;) — rockandbit, Nov 07 '17 at 08:07
@bennygenel no i am not creating inputs with a map. But i think you're on the right way. It is triggering re-render .... I put a key in the View but i'm still losing the focus ... thanx for response ;) — rockandbit, Nov 07 '17 at 08:30

score 0 · Answer 1 · answered Nov 07 '17 at 16:50

0

Just read the react-addons-update docs. You'd want your reducer case to look something like this:

return update(state, {
    lines: {$splice: [[action.payload.index, 1, action.payload.cant]]}
});

But note that action.payload.cant would have to be the whole object you'd like to replace. So either pass that or get it from the state beforehand.

answered Nov 07 '17 at 16:50

Rick Jolly

2,949
2
23
31

ok. I've tried your solution and it updates correctly but i'm still losing focus. I type one character and render the component.Thanx – rockandbit Nov 08 '17 at 10:14

Can't update an input value inside specific array item in redux

1 Answers1