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 是我在打开模式之前输入的内容。但是，当我关闭模态事件标题时，它又是空的。 我是 Redux 的新手，我不知道它为什么会这样。我在这里需要一个提示，因为不知何故我很难用谷歌搜索这个问题。 感谢您的帮助。

NewEvent.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

由于您的默认情况，您的减速器正在创建额外的嵌套集：

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

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

Answer 2

在你的减速器中，怎么样：

发件人：

{ ...state, eventTitle: action.payload }

收件人：

{ ...state, {eventTitle: action.payload} }