Question

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

func registerUser(_ email: String, givenName: String, familyName: String, password: String) -> Promise<JSON> {
    let req = urlRequestForPath("/user/create/local/", parameters: nil, method: .POST) as! NSMutableURLRequest
    let queryString = stringFromParameters(["email": email.lowercased() as AnyObject, "given_name": givenName as AnyObject, "family_name": familyName as AnyObject, "password": password as AnyObject, "client_id": oauthClientId as AnyObject])

    req.httpBody = queryString.data(using: String.Encoding.utf8, allowLossyConversion: false)

    let p = URLSession.shared.dataTask(.promise, with: req.pmkRequest)

    return p.then { (data, response) -> Promise<JSON> in
        let json = try! JSON(data: data)
        return Promise.value(json)
    }
}

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

NewEvent.js

...

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

...

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

...

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

NewEventActions.js

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

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

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

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

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

Answer 2

在减速器中，该怎么办？

发件人：

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

收件人：

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

关闭（或打开）模式后，Redux状态清除

2 个答案: