ReactJS：更新值而不重新加载页面

Question

我有这个问题，当我对某些数据进行插入或更改时，要查看需要重新加载页面的新数据，而我会自动更新值而无需重新加载页面。我该怎么办？

这是用户点击提交和发帖的部分

_onSubmit(Document)
    {
        const self = this
        if ( !_.isEmpty(Document) )
        {
            //..
            if (Document && !_.isEmpty(Document.Anagraphics))
            {
                alertify.confirm(
                    utility.t('sureYouWanna_SAVE'),
                    () => {
                        const now = new Date();
                        Document._id = `PRODUCT:${new Date().getTime()}-${utility.CUID()}`
                        Document.CreationDate = now.toISOString()
                        Document.CategoryCode 
                        Document.Status = 'New';
                        Document.Type = 'PRODUCT';
                        self._POST(Document)
                    },
                    function(){}
                ).set('labels', {ok: utility.t('YES_SAVE'), cancel: utility.t('CANCEL')})
            }
            else
            {
                $methods.WarnMissingValues()
            }
        }
        else {
            $methods.WarnMissingValues()
        }
    }



_POST(Document)
    {
        console.log("DOCUMENT POST", Document)
        const self = this
        const auth = this.props.db.auth
        fetch(`${this.props.db.couch_db_host_url}requests`,{
            method: 'POST',
            credentials: 'include',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization': 'Basic ' + btoa(`${auth.username}:${auth.password}`)
            },
            body: JSON.stringify(Document)
        })
        .then(response => {
            alertify.dismissAll()
            if(response.status > 299 || response.status < 200){
                alertify.error(utility.t('AN_ERROR_OCCURRED'))
                self._updateState({ submitSucceeded: false })
            }
            else{
                alertify.alert(utility.t('ITEM_EDITED_OK'), function(){})
                self.props.history.push({
                    pathname: RoutesIT.products_details
                })
            }
        })
        .catch((err, warning) => {
            if (err)
            {
                alertify.dismissAll()
                alertify.error(utility.t('AN_ERROR_OCCURRED'))
                console.log('_POST', err);
                self._updateState({ submitSucceeded: false })
            }
            else
            {
                console.log(warning)
                alertify.dismissAll()
                alertify.warning(utility.t(warning))
            }
        })
    }

如何不重新加载页面以查看帖子的结果？谢谢

更新：

在页面中我也有：

function mapStateToProps(state) {
    const { app: { login, p, c, l, c_timestamp, p_timestamp, l_timestamp }, form } = state;
    return {
        db: login ? login.db : null,
        Sender: login ? login.Location : null,
        timestamp: login ? login.timestamp : null,
        [ FORM_NAME ]: form[FORM_NAME],
        products: p,
        locations: l,
        categories: c, 
        categories_timestamp: c_timestamp,
        products_timestamp: p_timestamp,
        locations_timestamp: l_timestamp,
        utente: login,
    };
}

减速器

case actions.CATE_UPDATE:
    {
      return {
        ...state,
        c: action.payload,
        c_timestamp: new Date().getTime()
      }
    }

Answer 1

就我在您的代码中看到的情况而言，问题可能在于您在提交数据时没有分派任何操作。

Redux 存储只能通过操作进行修改，并且由于您没有触发任何操作，因此它的内容永远不会被更新。这就解释了为什么你的组件没有实时更新：你的本地数据永远不会改变，所以 React 不知道任何更新。当您重新加载页面时一切正常，因为您可能正在从服务器获取数据，而在您的 POST 请求期间数据确实发生了变化。

为了解决这个问题，您首先需要将mapDispatchToProp 传递给您的组件，就像您对mapStateToProps 所做的一样：

connect(mapStateToProps, mapDispatchToProps)(YourComponent);

在mapDispatchToProps 内部，您必须返回一个包含函数的属性，该函数将调度您要运行的CATE_UPDATE 操作：

const mapDispatchToProps = (dispatch) => ({
  cateUpdateAction: (payload) => dispatch({
    type: CATE_UPDATE,
    payload
  }),
});

完成此操作后，您将能够从组件的 props 访问此函数，并在 _POST 方法中调用它。

if (response.status > 299 || response.status < 200){
  alertify.error(utility.t('AN_ERROR_OCCURRED'))
   self._updateState({ submitSucceeded: false })
} else {
  alertify.alert(utility.t('ITEM_EDITED_OK'), function(){})

  // Dispatch action to update data in Redux store
  self.props.cateUpdateAction(data_to_save);

  self.props.history.push({
    pathname: RoutesIT.products_details
  })
}