Question

在我的帐户页面上，我有一个“标签”，称为“删除”，该功能旨在删除该条目。 href将“标签”发送到DeleteEntryRedirect组件，该组件调用DeleteEntry操作，该操作会触发对服务器的API调用，以从服务器中删除它，然后向Redux发送调度，将其从状态中删除。该组件会呈现一个事件div，但永远不会完全呈现为历史记录道具来将您送回帐户组件/ account。

问题再次出现在帐户中，即使它不在服务器中，它仍然显示条目。但是帐户组件在分派之前检查了服务器/状态，并且API调用在重定向之前有时间采取行动了吗？有什么想法可以避免这种情况吗？

帐户页面（已删除无关位）

print(linear_search(data,target))

直接删除条目

const AccountPage = props => {
    const { username, id } = props.currentUser.user;
    const { entry, position } = props;
    useEffect(() => {
        props.fetchUserEntry(id);
  }, []);

 DISPLAYS ENRTY IF THERE IS ONE + EDIT/DELETE BUTTONS

     <a href="/editentry">
        Edit
     </a>
     <a href="/deleteentry" >
        Delete
     </a>

function mapStateToProps(state) {
    return {
        entry: state.currentUserEntry,
        currentUser: state.currentUser,
    };
}

export default connect(
    mapStateToProps,
    { fetchUserEntry}
)(AccountPage);

动作

class DeleteEntryRedirect extends Component {
    componentDidMount() {
    this.props.deleteEntry()
    this.props.history.push('/account')
    }

    render() { return <div></div> }}

const mapDispatchToProps = {
    deleteEntry,
};

export default withRouter(
    connect(
        null,
        mapDispatchToProps
    )(DeleteEntryRedirect)
);

减速器

export const deleteUserEntry = entry => ({
    type: DELETE_USER_ENTRY,
    entry,
});

export const deleteEntry = () => {
    return (dispatch, getState) => {
    let { currentUser } = getState();
    const id = currentUser.user.id;
        return new Promise((resolve, reject) => {
            return apiCall('delete', `/api/user/${id}`)
                .then(res => {
                    dispatch(deleteUserEntry(res));
                    resolve();
                })
                .catch(err => {
                    dispatch(addError(err.message));
                    reject();
                });
        });
    };
}

在Redux＆React中重新渲染之前分派不更新

0 个答案: