Question

我有一个组件，它有一个表单，当用户点击提交按钮时，验证成功后，就会调度一个动作（这一切都发生在提交事件中）。

在调度操作后组件是否应该重新渲染？

目前，我没有看到这种情况发生，可能是什么原因？让我补充一下，这里发生了什么。 1）提交表格; 2）运行验证; 3）操作调度（它将数据发送到后端以将其保存到数据库中）;

在reducer中，我定义了：

    const messages = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case ADD_MESSAGE_SUCCESS:
            return { ...state, message: action.message, error: null, isMessageLoading: false };
        case ADD_MESSAGE_FAILURE:
            return { ...state, message: null, error: action.error, isMessageLoading: false };
        default:
            return state;
    }
};

在控制台日志中，我可以清楚地看到状态已发生变化。但是在这个阶段没有重新渲染。

const mapStateToProps = (state) => {
    return {
        message: state.messages.message,
        isMessageLoading: state.messages.isMessageLoading
    }
};

因此，当动作发送时，道具会更新。

这是一个动作的代码

    export const addMessage = (message) => {
    return (dispatch) => {
        dispatch({ type: ADD_MESSAGE });
        return fetch(`http://localhost:8080/api/contacts`, {
            credentials: 'include',
            method: 'POST',
            body: JSON.stringify(message),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
        }).then(response => {
            return response.json();
        }).then((data) => {
            dispatch(addMessageSuccess(data));
        }).catch(error => {
            console.log(`An error occurred while adding contact message: ${error}`);
            dispatch(addMessageFailure(error));
        });
    };
};

Answer 1

如果状态发生变化（并且在mapStateToProps中选择了更改后的状态），则已连接的组件将重新呈现

在您的情况下，message或isMessageLoading都可以触发更新。

请注意，如果邮件是字符串，并且您分派包含相同邮件字符串的操作，您的组件将不会重新呈现。例如，当前message状态为success，您发送的另一个操作也包含message: success：

{
  type: ADD_MESSAGE_SUCCESS,
  message: 'success'
}

然后您的组件不会更新。这是因为React-Redux的connect

有一些优化

这里有一个简单的示例：https://jsfiddle.net/njk5teoh/（我还将error添加到组件中），您可以多次单击“提交”按钮并查看控制台日志。

如果这不能解决您的问题，您可能需要提供可重现的jsfiddle / codepen或repo。

组件提交和操作调度后组件是否应该重新呈现？

1 个答案: