如何获得对象数组的一部分输入的当前值？

Question

So I am trying to fill an array with data. I am facing one problem.

1 - I am trying to find an index for every proper key in the array of objects. But I get an error once a new input is added. Yes, I am adding inputs dynamically too.

The inputs gets added well.

This is for example, how the data should look before been send to the backend. Like this is how the final object should be shaped:

{
  "previous_investments" : [
      {"name" : "A Name", "amount" : 10000},
      {"name" : "Some Name", "amount" : 35000}
  ]
}

Seems to be easy but I am having a hard time.

This is how my main component looks:

const PreviousInvestments = ({
  startupFourthStepForm,
  previousInvestmentsInputs,
  startupFourthStepFormActionHandler,
  previousInvestmentsInputsActionHandler,
}) => {
  const handleMoreInputs = async () => {
    await startupFourthStepFormActionHandler(
      startupFourthStepForm.previous_investments.push({
        name: '',
        amount: undefined,
      }),
    );
    await previousInvestmentsInputsActionHandler(
      `previous_investments-${previousInvestmentsInputs.length}`,
    );
  };

  return (
    <div className="previous-investments-inputs">
      <p>Previous Investments</p>
      {previousInvestmentsInputs.map((input, index) => (
        <div key={input}>
          <FormField
            controlId={`name-${index}`}
            onChange={e => {
              startupFourthStepFormActionHandler({
                // HERE IS WHERE I THINK I AM PROBABLY FAILING
                previous_investments: [{ name: e.currentTarget.value }],
              });
            }}
            value={startupFourthStepForm.previous_investments[index].name}
          />
        </div>
      ))}      
      <Button onClick={() => handleMoreInputs()}>
        + Add more
      </Button>    
    </div>
  );
};

export default compose(
  connect(
    store => ({
      startupFourthStepForm:
        store.startupApplicationReducer.startupFourthStepForm,
      previousInvestmentsInputs:
        store.startupApplicationReducer.previousInvestmentsInputs,
    }),
    dispatch => ({
      previousInvestmentsInputsActionHandler: name => {
        dispatch(previousInvestmentsInputsAction(name));
      },
      startupFourthStepFormActionHandler: value => {
        dispatch(startupFourthStepFormAction(value));
      },
    }),
  ),
)(PreviousInvestments);

In the code above, this button adds a new input and also it adds a new object to the array using the function handleMoreInputs :

      <Button onClick={() => handleMoreInputs()}>
        + Add more
      </Button>  

This is the reducer:

const initialState = {
  startupFourthStepForm: {
    previous_investments: [{ name: '', amount: undefined }],
  },

  previousInvestmentsInputs: ['previous_investments-0'],
}

const handlers = {
  [ActionTypes.STARTUP_FOURTH_STEP_FORM](state, action) {
    return {
      ...state,
      startupFourthStepForm: {
        ...state.startupFourthStepForm,
        ...action.payload.startupFourthStepForm,
      },
    };
  },

  [ActionTypes.PREVIOUS_INVESTMENTS_INPUTS](state, action) {
    return {
      ...state,
      previousInvestmentsInputs: [
        ...state.previousInvestmentsInputs,
        action.payload.previousInvestmentsInputs,
      ],
    };
  },
}

The funny thing is that I am able to type in the first input and everything goes well. But once I add a new input, a second one, I get this error:

TypeError: Cannot read property 'name' of undefined

43 | controlId={startupFourthStepForm.previous_investments[index].name}

Wo what do you think I am missing?

Answer 1

The handler for ActionTypes.STARTUP_FOURTH_STEP_FORM is defined to be invoked with an object for startupFourthStepForm in the payload and effectively replace it.

Where this handler is invoked, you need to ensure that it is called with previous_investments field merged with the new value

startupFourthStepFormActionHandler({
   ...startupFourthStepForm,
   previous_investments: [
     ...startupFourthStepForm.previous_investments.slice(0, index),
     {
       ...startupFourthStepForm.previous_investments[index],
       name: e.currentTarget.value
     },
     ...startupFourthStepForm.previous_investments.slice(index+1,)
   ],
});

I suggest to refactor away this piece of state update from the handler to the reducer so that updates to the store are reflected in co-located. This can be done by passing the index of the item in previous_investments as a part of the payload for ActionTypes.STARTUP_FOURTH_STEP_FORM action.