Question

我正在研究reactjs项目，并且正在我的应用程序中添加删除功能。我在传递角色PropType的manage-role-page的表单组件和父组件上创建了一个删除按钮。我有一个onDelete属性，我将delete方法传递给子组件，老实说，大多数此功能都有效。

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() {
    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}
   />
 );
}

在此组件上配置道具

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;
  }
}

当我单击Delete时，将调用该API，但随后我希望代码重定向到角色列表组件。我正在执行此操作，但收到警告，因为它返回到具有子表单组件的manage-form-page页面，并且表单具有以下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: 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中删除以下道具设置

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。

所以我的问题是我应该重定向到化简器中的角色列表吗？如果是，这样做的最佳实践方法是什么，但是对我来说，我读到的不是最佳方法，所以目前对其进行编码以在manage-role-page.js中进行管理。而且，如果我在这里进行管理，则会违反role: PropTypes.object.isRequired,道具的规则。因此，我不应该根据需要设置此属性，因为当我们触发删除操作时，reducer完成它的任务并传递回manage-role-page.js，以便它处理重定向回role-list.js的操作。该页面现在具有未设置角色属性的加载情况，因为在删除操作中该属性为null。我只是想了解管理这种情况的最佳方法。我相信很多开发人员都会遇到这种情况。

我是否在化简版中管理重定向，还是返回到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"
  },

感谢您的答复。

预先感谢

Answer 1

收到该警告的原因（看起来像是警告），但会影响您的功能，因为在呈现时角色值为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}
   />}

reactjs删除操作警告：道具类型失败：道具“角色”在“ ManageRolePage”中标记为必需，但其值为“ null”

1 个答案: