response-redux, измените ключ / значение объекта с параметрами из двух полей ввода одним действием - PullRequest
Новая
       57

response-redux, измените ключ / значение объекта с параметрами из двух полей ввода одним действием

0 голосов
/ 29 января 2020

Я пытаюсь изменить входные значения в объекте одним действием. таким образом, действие получает значение ключа ("title" и "content") в качестве параметра от каждого входа, когда его тип. Это filler note объект массива id совпадает с activeId. Присвойте значение const noteValue = { [action.key]: action.value };, когда I console.log показывает объект с правильным значением, однако я не могу вернуть правильное значение с помощью оператора распространения. Я пытался с map, но он возвращает boolean. так что я не думаю, что это правильный подход. Было бы очень полезно с руководством. Спасибо.

компонент 

<div key={id}>
  <Title
   type="text"
   defaultValue={title}
   onChange={e => editNote("title", e.target.value)}
  ></Title>
  <NoteContent
    type="text"
    defaultValue={content}
    onChange={e => editNote("content", e.target.value)}
  ></NoteContent>
</div>

действие 

export const editNote = (key, value) => ({
  type: EDIT_NOTE,
  key,
  value
});

состояние 

const initialState = {
  notes: [
    {
      id: "1234",
      title: "title 1",
      content: "content 1"
    },
    {
      id: "5678",
      title: "title 2",
      content: "content 2"
    },
    {
      id: "9101112",
      title: "title 3",
      content: "content 3"
    }
  ],
  activeId: null
};

редуктор 

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case SET_ACTIVE_ID:
      return { ...state, activeId: action.activeId };
    case EDIT_NOTE:
      const note = state.notes.filter(note => note === state.activeId);
      const noteValue = { [action.key]: action.value };
      const noteArr = [...note, { ...noteValue }];
      console.log(noteArr);
      return { ...state, notes: [...state.notes, ...noteArr] };

    default:
      return state;
  }
}

1 Ответ

0 голосов
/ 29 января 2020

вы можете использовать карту и попробовать, как показано ниже 

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case SET_ACTIVE_ID:
      return { ...state, activeId: action.activeId };
    case EDIT_NOTE:
      const updatedReuslt = state.notes.map((note)=>{
        if(note.id === state.activeId){
          return {...note, [action.key] : action.value }
        } else {
          return note;
        }
      })
      return { ...state, notes:updatedResult };

    default:
      return state;
  }
}
...