Javascript 无法从呈现方法react es6设置动态状态

我试图从一个方法中添加动态状态。其思想是，当我从渲染方法调用该方法时，它将接受参数值以设置动态状态值

这是我的密码：

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

它采用无限循环并生成以下错误：

---

如何在此处设置这些状态，这些状态来自

renderFeaturePermissionOptions（'Contact'）

？->一个示例调用。

您不能在渲染函数中调用

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

consttrcomponent=（{name，onChange}）=>{
返回(
{name}
);
}
//如果要设置动态状态，可以这样设置
类trComponent扩展组件{
建造师（道具）{
让viewPermission=props.name+“\u视图”
让createPermission=props.name+“\u create”
让editPermission=props.name+“\u edit”
让deletePermission=props.name+“\u delete”
此.state={
[viewPermission]：正确，
....
}
}
渲染（）{
返回(
{name}
);
}
}
//那么就这样用吧

不应在渲染方法中设置状态，也不应在渲染发生时调用这些方法

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

  // 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

---

我不明白这里是如何添加动态的，你能给我举个例子吗？有可能在react中实现吗？

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