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

Posted 2023-02-22

【中文标题】如何在一个 submitHandler 中两次更新反应状态

【英文标题】：How to update react state twice in one submitHandler

【发布时间】：2018-10-22 18:00:45

【问题描述】：

我想在 React 中提交一个表单，我试图用一个 submitHandler 更新状态两次。第二次更新依赖于第一次更新。

   submitHandler(event) 
            event.preventDefault();
            let target      = event.target;
            let allMessages = this.props.messages;
            let title       = target.title.value,
                message     = target.message.value,
                user        = target.user.value,
                time        = `$(new Date).getHours():$(new Date).getMinutes()`,
                id          = allMessages ? allMessages.length + 1 : 1;

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

我正在创建一条消息

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

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

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

如何使用 async 和所有“this”环境，以便使用 postNewMessage 推送到数组的新消息将具有来自新 singleMessage 值的值？

以下是我如何连接 create 和 postMewMessage：

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)

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

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

entire repo here

【问题讨论】：

你在使用 redux 吗？您忘记将其添加到标签中。你要找的可能是redux-thunk 例子可以找到here

您提到了异步，但我在您的问题中没有看到任何异步代码。 createNewMessage 分派createMessage 的结果，而您分派addNewMessage 的结果，但缺少这些函数的作用。

@HMR 你能看看我的回购链接吗？ （希望这是正确的 *** 礼仪

【参考方案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);