javascript - 关闭(或打开)模态后 Redux 状态清除

Question

我有一个使用 React Native 和 Redux 的表单。此表单有一些输入字段，如标题和日期。此外，此输入字段具有选择用户的模式。一旦我打开和关闭模式，标题和日期以及所有其他输入字段再次为空。我不知道是关闭还是打开导致了问题。当我回到另一个屏幕并返回到 NewEvent-Screen 时，输入字段仍然填写。这仅在我打开模式时发生。

16:51:23 [exp] Object {
16:51:23 [exp]   "eventTitle": "Tes",
16:51:23 [exp]   "state": Object {
16:51:23 [exp]     "state": Object {
16:51:23 [exp]       "eventTitle": "Test123",
16:51:23 [exp]       "state": Object {
16:51:23 [exp]         "state": Object {
16:51:23 [exp]           "state": Object {
16:51:23 [exp]             "state": Object {
16:51:23 [exp]               "state": Object {
16:51:23 [exp]                 "state": Object {
16:51:23 [exp]                   "state": Object {
16:51:23 [exp]                     "eventDate": "no date",
16:51:23 [exp]                     "eventMembers": Array [],
16:51:23 [exp]                     "eventSubtasks": Array [],
16:51:23 [exp]                     "eventTitle": "",
16:51:23 [exp]                   },
16:51:23 [exp]                 },
16:51:23 [exp]               },
16:51:23 [exp]             },
16:51:23 [exp]           },
16:51:23 [exp]         },
16:51:23 [exp]       },
16:51:23 [exp]     },
16:51:23 [exp]   },
16:51:23 [exp] }
16:51:23 [exp] Tes

这是当我记录 Forms 状态的 mapStateToProps 时控制台显示的内容。 Test123 是我在打开模式之前输入的内容。但是，当我关闭模式 eventTitle 再次为空。我是 Redux 的新手，我不知道为什么它会这样。我在这里需要一个提示，因为不知何故我很难用谷歌搜索这个问题。感谢您的帮助。

新事件.js

...

  closeMultiModal = () => {
    this.setState({ showSelectModal: false });
  }

...

<View style={styles.container}>
  <Modal
   animationType="slide"
   transparent={false}
   visible={this.state.showSelectModal}
   >
    <MultiSelect
     closeMultiModal={this.closeMultiModal}
    />
 </Modal>

...

const mapStateToProps = ({ newEvent }) => {
  const { eventTitle, eventDate } = newEvent;
  console.log(newEvent);
  console.log(eventTitle);
  return { eventTitle, eventDate  };
};

export default connect(mapStateToProps, {
  updateNewEventTitle, updateNewEventDate
})(NewEvent);

NewEventActions.js

import {
  UPDATE_NEW_EVENT_TITLE,
  UPDATE_NEW_EVENT_DATE,
  UPDATE_NEW_EVENT_MEMBERS,
  UPDATE_NEW_EVENT_SUBTASKS
} from './types';

export const updateNewEventTitle = (text) => {
  return {
    type: UPDATE_NEW_EVENT_TITLE,
    payload: text
  };
};

export const updateNewEventDate = (date) => {
  return {
    type: UPDATE_NEW_EVENT_DATE,
    payload: date
  };
};

NewEventReducer.js//编辑:这就是问题所在:

import {
  UPDATE_NEW_EVENT_TITLE,
  UPDATE_NEW_EVENT_DATE,
  UPDATE_NEW_EVENT_MEMBERS,
  UPDATE_NEW_EVENT_SUBTASKS
} from '../actions/types';

const INITIAL_STATE = {
    eventTitle: '',
    eventDate: 'no date',
    eventMembers: [],
    eventSubtasks: []
 };

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case UPDATE_NEW_EVENT_TITLE:
      return { ...state, eventTitle: action.payload };
    case UPDATE_NEW_EVENT_DATE:
      return { ...state, eventDate: action.payload };
    default:
      return { state };
  }
};

Answer 1

由于您的默认情况，您的 reducer 正在创建额外的嵌套集:

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case UPDATE_NEW_EVENT_TITLE:
      return { ...state, eventTitle: action.payload };
    case UPDATE_NEW_EVENT_DATE:
      return { ...state, eventDate: action.payload };
    default:
      return { state };
  }
};

将该行更改为:

return state;

...否则它会创建一个像这样的对象:

{
  state: <all the previous state>
}

...并将继续为每个符合默认情况的操作嵌套状态属性。