react-redux，使用一个操作从两个输入字段更改对象 key/value

Question

我正在尝试通过一个操作更改对象中的输入值。因此该操作在其类型时从每个输入获取键（"title" 和 "content"）值作为参数。它 filler note 数组对象 id 与 activeId 匹配。赋值 const noteValue = { [action.key]: action.value }; 当我 console.log 它显示具有正确值的对象时，我不能 return 使用扩展运算符的正确值。我尝试使用 map 但它 returns 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;
  }
}

Answer 1

你可以用地图试试下面的方法

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;
  }
}

react-redux，使用一个操作从两个输入字段更改对象 key/value

react-redux, change object key/value with parameters from two input fields with one actions

javascript

reactjs

spread-syntax

redux

react-redux