Question

我想在React中提交一个表单，并尝试使用一个submitHandler更新状态两次。第二次更新取决于第一次更新。

this.props.createNewMessage(title, message, user, time, id);

我用

创建了一条消息

this.props.postNewMessage(this.props.singleMessage)

在我创建该消息之后，我想将该状态中的整个对象推送到一个消息数组：

const mapStateToProps = state => {
    return {
        messages: state.messages.messages,
        title: state.singleMessage.title,
        message: state.singleMessage.message,
        user: state.singleMessage.user,
        time: state.singleMessage.time,
        singleMessage: state.singleMessage
    }
}

const mapDispatchToProps = {
    createNewMessage,
    postNewMessage
}

export default connect(mapStateToProps, mapDispatchToProps)(CreateNewPost)

我如何使用异步以及所有＆＃39;这个＆＃39;使用postNewMessage推送到数组的新消息将具有来自新singleMessage值的值？

以下是我连接create和postMewMessage的方法：

export const addNewMessage = (message) => ({
    type: ADD_NEW_MESSAGE,
    message
})

export const postNewMessage = (newMessage) =>
    dispatch => dispatch(addNewMessage(newMessage))   

export const createMessage = (title, message, user, time, id) => ({
    type: CREATE_MESSAGE,
    title,
    message,
    user, 
    time, 
    id
})

export const createNewMessage = (title, message, user, time, id) =>
    dispatch => dispatch(createMessage(title, message, user, time, id))

它们在这里定义（在单独的reducer文件中，将通过combineReducers组合：

settings = {
    mode: 'external',
    hideSubHeader: true,
    actions: false,

    edit: {
      editButtonContent: '<i class="nb-edit"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
    },
    columns: {

      eno: {
        title: 'S.NO',
        type: 'string',
        filter: {
          type: 'text',
        },
        editable: false,
        addable: false,
        valuePrepareFunction: (cell, row) => {
          this.j = this.j + 1
          return this.j
        },
      },
      choose_payee : {
        title: 'Payee Name',
        type: 'string',
      },

      payment_date: {
        title: ' Payment Date',
        type: 'string',
      },
      pay_method: {
        title: 'Payment Method',
        type: 'string',
      }, 
      total: {
        title: 'Total',
        type: 'string',
      },




    },
  };

entire repo here

Answer 1

repo中没有异步，但确实在allMessageReducer.js中找到了一个错误：

    case ADD_NEW_MESSAGE:
        return Object.assign(
            {},
            state, 
            {messages:state.messages.concat(action.message)}
        );

尝试访问CreateNewPost.js中的this.props.singleMessage时出现问题，但我认为这与反应呈现/设置新状态（可能在requestAnimationframe中）有关。

您可以在记录时看到错误的字段，而不是使用它，只是使用您已有的值：

this.props.createNewMessage(title, message, user, time, id);
console.log(
    "state not yet available in this.props",
    JSON.stringify(this.props.singleMessage,undefined,2)
);
this.props.postNewMessage({title, message, user, time, id});

如何在一个submitHandler中更新两次反应状态

1 个答案: