无法通过渲染方法React es6设置动态状态

Question

我正在尝试从方法中添加动态状态。 想法是，当我从render方法调用该方法时，它将接受参数值以设置动态状态值。

这是我的代码：

renderFeaturePermissionOptions( featureName ) {
  // Generate permission rules.
  let viewPermission    = featureName + "_view"
  let createPermission  = featureName + "_create"
  let editPermission    = featureName + "_edit"
  let deletePermission  = featureName + "_delete"
  // Set states for all dynamic checkboxes.
  this.setState( { [viewPermission]   : true } )
  this.setState( { [createPermission] : true } )
  this.setState( { [editPermission]   : true } )
  this.setState( { [deletePermission] : true } )
  return(
    <tr>
      <td>{featureName}</td>
      <td><input name={ featureName + "/selectAll" } type="checkbox" onChange={this.checkSiblingCheckBoxes}/></td>
      <td><input name={ featureName + "/view" } type="checkbox"/></td>
      <td><input name={ featureName + "/create" } type="checkbox"/></td>
      <td><input name={ featureName + "/edit" } type="checkbox"/></td>
      <td><input name={ featureName + "/delete" } type="checkbox"/></td>
    </tr>
  )
}

我想重构此代码，以便我可以针对参数中给定的任何路由名称调用此方法，它将创建状态作为参数名称。

虽然还没有完成，但是当我像这样从render方法调用此方法时

{ this.renderFeaturePermissionOptions( 'Organization' ) }

它需要一个无限循环并产生此错误：

我如何在这里设置来自renderFeaturePermissionOptions( 'Contact' )参数的renderFeaturePermissionOptions( 'Contact' ) ？ ->一个示例调用。

Answer 1

你不能打电话setState在渲染功能，当你打电话的setState，该组件将再次渲染，如果你把它render功能。 这将是无止境的循环。

因此您可以尝试将其编写为另一个childComponent，也许看起来像这样。

const trComponent = ({name, onChange}) => {
   return (
        <tr>
          <td>{name}</td>
          <td><input name={ name + "/selectAll" } type="checkbox" onChange={onChange}/></td>
          <td><input name={ name + "/view" } type="checkbox"/></td>
          <td><input name={ name + "/create" } type="checkbox"/></td>
          <td><input name={ name + "/edit" } type="checkbox"/></td>
          <td><input name={ name + "/delete" } type="checkbox"/></td>
        </tr>
   );
}

// if you want to set dynamic state, you can set it in this way
class trComponent extends Component {
    constructor (props) {
        let viewPermission    = props.name + "_view"
       let createPermission  = props.name + "_create"
       let editPermission    = props.name + "_edit"
       let deletePermission  = props.name + "_delete"
        this.state = {
            [viewPermission]: true,
            ....
        }
    }

    render () {
        return (
        <tr>
          <td>{name}</td>
          <td><input name={ this.props.name + "/selectAll" } type="checkbox" onChange={this.props.onChange}/></td>
          <td><input name={ this.props.name + "/view" } type="checkbox"/></td>
          <td><input name={ this.props.name + "/create" } type="checkbox"/></td>
          <td><input name={ this.props.name + "/edit" } type="checkbox"/></td>
          <td><input name={ this.props.name + "/delete" } type="checkbox"/></td>
        </tr>
   );
    }
}

// then use it in this way

<trComponent name='Organization' onChange={this. checkSiblingCheckBoxes}/>

Answer 2

您不应在渲染发生时调用的一个或多个渲染方法中设置状态。

这在您的代码中是不正确的。

  // Set states for all dynamic checkboxes.
  this.setState( { [viewPermission]   : true } )
  this.setState( { [createPermission] : true } )
  this.setState( { [editPermission]   : true } )
  this.setState( { [deletePermission] : true } )

通过某些生命周期方法或组件上的某些用户操作来设置状态。

编辑：是的，在组件的构造函数中初始化默认状态

export default class TestComp extends Component {

    constructor(props) {
        super(props);
        this.state = {
            viewPermission : true,
            createPermission] : true,
            editPermission]   : true,
            deletePermission] : true

        };
    }
 // Rest of your component methods such as render and others