我正在开发一个reactjs项目，我正在将删除功能添加到我的应用程序中。 我在表单组件和manage-role-page中的父组件上创建了一个删除按钮，我在一个PropType of role中传递。 我有一个onDelete属性我将删除方法传递给子组件，说实话，大多数此功能都有效。
管理-role.js
deleteRole(event) { event.preventDefault(); this.setState({deleting: true}); this.props.actions.deleteRole(this.state.role) .then(() => this.redirectDelete()) .catch(error => { toastr.error(error); this.setState({deleting: false}); }); }渲染功能：
render() { if(this.state.redirect) { return <Redirect to="/roles" />; } return ( <RoleForm errors={this.state.errors} onChange={this.updateRoleState} onSave={this.saveRole} onDelete={this.deleteRole} role={this.state.role} saving={this.state.saving} deleting={this.state.deleting} /> ); }Props配置此组件
ManageRolePage.propTypes = { role: PropTypes.object.isRequired, actions: PropTypes.object.isRequired, match: PropTypes.object.isRequired };这是子组件代码：
import React from 'react'; import PropTypes from 'prop-types'; import TextInput from '../common/text-input'; const RoleForm = ({role, onSave, onChange, onDelete, saving, deleting, errors}) => { return ( <form> <h1>Manage Role</h1> <div>{role._id}</div> <TextInput name="role" label="Role" value={role.role} onChange={onChange} error={errors.role}/> <TextInput name="notes" label="Notes" value={role.notes} onChange={onChange} error={errors.notes}/> <div>{role.createdDate}</div> <div>{role.dateModified}</div> <input type="submit" disabled={saving} value={saving ? 'Saving...' : 'Save'} className="btn btn-primary" onClick={onSave} /> <input type="submit" disabled={deleting} value={deleting ? 'Deleting...' : 'Delete'} className="btn btn-primary" onClick={onDelete} /> </form> ); }; RoleForm.propTypes = { role: PropTypes.object.isRequired, onSave: PropTypes.func.isRequired, onDelete: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, saving: PropTypes.bool, deleting: PropTypes.bool, errors: PropTypes.object, }; export default RoleForm;Reducer看起来像这样：
import * as types from '../actions/action-types'; import initialState from './initial-state'; export default function roleReducer(state = initialState.roles, action) { switch(action.type) { case types.LOAD_ROLES_SUCCESS: return action.roles; case types.CREATE_ROLE_SUCCESS: return [ ...state, Object.assign({}, action.role) ]; case types.UPDATE_ROLE_SUCCESS: return [ ...state.filter(role => role._id !== action.role._id), Object.assign({}, action.role) ]; case types.DELETE_ROLE_SUCCESS: { let newState = Object.assign([], state); const indexOfRoleToDelete = state.findIndex(role => { return role._id === action.role._id; }); newState.splice(indexOfRoleToDelete, 1); return newState; } default: return state; } }当我单击删除时，调用API，但我希望代码重定向到角色列表组件。 我有这个工作，但我得到一个警告，因为它返回到具有子表单组件的管理表单页面，并且表单具有以下prop配置：
RoleForm.propTypes = { role: PropTypes.object.isRequired, onSave: PropTypes.func.isRequired, onDelete: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, saving: PropTypes.bool, deleting: PropTypes.bool, errors: PropTypes.object, };警告我得到的是：
Warning: Failed prop type: The prop `role` is marked as required in `ManageRolePage`, but its value is `null`. in ManageRolePage (created by Connect(ManageRolePage)) in Connect(ManageRolePage) (created by Route) in Route (created by App) in div (created by App) in App (created by Connect(App)) in Connect(App) (created by Route) in Route in Router (created by BrowserRouter) in BrowserRouter in Provider并且页面会重定向，因为表单管理了manage-role-page.js中的删除重定向。
deleteRole(event) { event.preventDefault(); this.setState({deleting: true}); this.props.actions.deleteRole(this.state.role) .then(() => this.redirectDelete()) .catch(error => { toastr.error(error); this.setState({deleting: false}); }); } redirectSave() { this.setState({saving: false, deleting: false, redirect: true}); toastr.success('Role saved'); } redirectDelete() { this.setState({saving: false, deleting: false, redirect: true}); toastr.success('Role deleted'); } render() { if(this.state.redirect) { return <Redirect to="/roles" />; } return ( <RoleForm errors={this.state.errors} onChange={this.updateRoleState} onSave={this.saveRole} onDelete={this.deleteRole} role={this.state.role} saving={this.state.saving} deleting={this.state.deleting} /> ); }如果我在manage-role-page.js中删除以下prop设置
ManageRolePage.propTypes = { role: PropTypes.object, actions: PropTypes.object.isRequired, match: PropTypes.object.isRequired };Notice now the role is not set to required, I get no warning 。
所以我的问题是我应该将重定向重定向到reducer中的角色列表，如果是这样，这样做的最佳实践方法是什么，但对我来说，我已经读过这不是最好的方法，所以目前我已将它编码为在manage-role-page.js中管理它。 如果我在这里管理这个，我打破了role: PropTypes.object.isRequired, Prop的规则role: PropTypes.object.isRequired, . 因此，我不应该根据需要设置此属性，因为当我们触发删除并且reducer完成它任务并传递回manage-role-page.js时，它会将重定向处理回到role-list.js as该页面现在有一个加载场景，没有设置角色属性，因为在删除操作时它将为null。 我只想了解管理此方案的最佳方法。 我相信很多开发人员都会遇到这种情况。
我是否在reducer中管理重定向，或者返回ManageRole组件，并且没有为manage-role-page.js上的角色设置必需的属性？ 关于如何以不同方式管理这个问题的任何示例，或管理此问题的最佳方法都会很棒。
package.json依赖关系显示版本是：
"dependencies": { "babel-polyfill": "6.26.0", "bootstrap": "4.1.1", "dotenv": "^6.0.0", "jquery": "3.3.1", "node-sass": "^4.9.2", "node-sass-chokidar": "^1.3.3", "prop-types": "15.6.2", "react": "16.4.1", "react-dom": "16.4.1", "react-redux": "5.0.7", "react-router-dom": "4.3.1", "react-router-redux": "4.0.8", "redux": "4.0.0", "redux-thunk": "2.3.0", "toastr": "2.1.4" },您的回复表示赞赏。
提前致谢，
I am working on a reactjs project and I am adding in delete functionality into my app. I have created a delete button on the form component and on the parent component in the manage-role-page I pass in a PropType of role. I have a onDelete property I pass into the child component the delete method and to be honest most of this functionality works.
manage-role.js
deleteRole(event) { event.preventDefault(); this.setState({deleting: true}); this.props.actions.deleteRole(this.state.role) .then(() => this.redirectDelete()) .catch(error => { toastr.error(error); this.setState({deleting: false}); }); }Render Function:
render() { if(this.state.redirect) { return <Redirect to="/roles" />; } return ( <RoleForm errors={this.state.errors} onChange={this.updateRoleState} onSave={this.saveRole} onDelete={this.deleteRole} role={this.state.role} saving={this.state.saving} deleting={this.state.deleting} /> ); }Props config on this component
ManageRolePage.propTypes = { role: PropTypes.object.isRequired, actions: PropTypes.object.isRequired, match: PropTypes.object.isRequired };Here is the child component code:
import React from 'react'; import PropTypes from 'prop-types'; import TextInput from '../common/text-input'; const RoleForm = ({role, onSave, onChange, onDelete, saving, deleting, errors}) => { return ( <form> <h1>Manage Role</h1> <div>{role._id}</div> <TextInput name="role" label="Role" value={role.role} onChange={onChange} error={errors.role}/> <TextInput name="notes" label="Notes" value={role.notes} onChange={onChange} error={errors.notes}/> <div>{role.createdDate}</div> <div>{role.dateModified}</div> <input type="submit" disabled={saving} value={saving ? 'Saving...' : 'Save'} className="btn btn-primary" onClick={onSave} /> <input type="submit" disabled={deleting} value={deleting ? 'Deleting...' : 'Delete'} className="btn btn-primary" onClick={onDelete} /> </form> ); }; RoleForm.propTypes = { role: PropTypes.object.isRequired, onSave: PropTypes.func.isRequired, onDelete: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, saving: PropTypes.bool, deleting: PropTypes.bool, errors: PropTypes.object, }; export default RoleForm;Reducer looks like this:
import * as types from '../actions/action-types'; import initialState from './initial-state'; export default function roleReducer(state = initialState.roles, action) { switch(action.type) { case types.LOAD_ROLES_SUCCESS: return action.roles; case types.CREATE_ROLE_SUCCESS: return [ ...state, Object.assign({}, action.role) ]; case types.UPDATE_ROLE_SUCCESS: return [ ...state.filter(role => role._id !== action.role._id), Object.assign({}, action.role) ]; case types.DELETE_ROLE_SUCCESS: { let newState = Object.assign([], state); const indexOfRoleToDelete = state.findIndex(role => { return role._id === action.role._id; }); newState.splice(indexOfRoleToDelete, 1); return newState; } default: return state; } }When I click delete the call is made to the API but then I want the code to redirect to the role list component. I have this working but I get an warning because it goes back to the manage-form-page that has the child form component and the form has the following prop config:
RoleForm.propTypes = { role: PropTypes.object.isRequired, onSave: PropTypes.func.isRequired, onDelete: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, saving: PropTypes.bool, deleting: PropTypes.bool, errors: PropTypes.object, };Warning I get is:
Warning: Failed prop type: The prop `role` is marked as required in `ManageRolePage`, but its value is `null`. in ManageRolePage (created by Connect(ManageRolePage)) in Connect(ManageRolePage) (created by Route) in Route (created by App) in div (created by App) in App (created by Connect(App)) in Connect(App) (created by Route) in Route in Router (created by BrowserRouter) in BrowserRouter in ProviderAnd the page does redirect because the form manages the delete redirect like so in the manage-role-page.js.
deleteRole(event) { event.preventDefault(); this.setState({deleting: true}); this.props.actions.deleteRole(this.state.role) .then(() => this.redirectDelete()) .catch(error => { toastr.error(error); this.setState({deleting: false}); }); } redirectSave() { this.setState({saving: false, deleting: false, redirect: true}); toastr.success('Role saved'); } redirectDelete() { this.setState({saving: false, deleting: false, redirect: true}); toastr.success('Role deleted'); } render() { if(this.state.redirect) { return <Redirect to="/roles" />; } return ( <RoleForm errors={this.state.errors} onChange={this.updateRoleState} onSave={this.saveRole} onDelete={this.deleteRole} role={this.state.role} saving={this.state.saving} deleting={this.state.deleting} /> ); }If I remove the following prop setting in the manage-role-page.js
ManageRolePage.propTypes = { role: PropTypes.object, actions: PropTypes.object.isRequired, match: PropTypes.object.isRequired };Notice now the role is not set to required, I get no warning.
So my question is should I be doing the redirect back to the role list in the reducer and if so what is the best practice way of doing this, but to me I have read this is not best way, so currently I have coded it to manage this in the manage-role-page.js. And if I manage this here I break the rule for the Prop of role: PropTypes.object.isRequired,. So should I not be setting this property as required, as when we trigger the delete and the reducer completes it task and pass back to the manage-role-page.js so that it handles the redirect back to the role-list.js as the page now has a scenario of loading without a role property being set as this will be null on a delete operation. I am just trying to understand the best way of managing this scenario. I am sure this is something that a lot of developer would have come across.
Do I manage the redirect in the reducer, or back to the ManageRole component and not have the required property set for the role on the manage-role-page.js? Any example on how to manage this differently, or the best way to manage this would be great too see.
package.json dependency to show versions are:
"dependencies": { "babel-polyfill": "6.26.0", "bootstrap": "4.1.1", "dotenv": "^6.0.0", "jquery": "3.3.1", "node-sass": "^4.9.2", "node-sass-chokidar": "^1.3.3", "prop-types": "15.6.2", "react": "16.4.1", "react-dom": "16.4.1", "react-redux": "5.0.7", "react-router-dom": "4.3.1", "react-router-redux": "4.0.8", "redux": "4.0.0", "redux-thunk": "2.3.0", "toastr": "2.1.4" },You responses are appreciated.
Thanks in advance,
最满意答案
您收到该警告的原因（看起来像是一个警告）但会影响您的功能，因为在呈现时角色值为null。 可能你需要做的是，检查角色，当它不为null时，然后调用RoleForm组件
{this.state.role != null && typeof this.state.role != undefined && <RoleForm errors={this.state.errors} onChange={this.updateRoleState} onSave={this.saveRole} onDelete={this.deleteRole} role={this.state.role} saving={this.state.saving} deleting={this.state.deleting} />}The reason you get that warning(looks like it’s a warning) but impacts your functionality because the role value is null at the time of rendering. Probably what you have to do is, check the role and when it is not null then call RoleForm component
{this.state.role != null && typeof this.state.role != undefined && <RoleForm errors={this.state.errors} onChange={this.updateRoleState} onSave={this.saveRole} onDelete={this.deleteRole} role={this.state.role} saving={this.state.saving} deleting={this.state.deleting} />}更多推荐
发布评论