时间戳

首页 > 解决方案 > 使用 setState 方法更新嵌套对象格式的状态数据

reactjs - 使用 setState 方法更新嵌套对象格式的状态数据

问题描述

class TreeStructure extends Component {
  constructor(props) {
    super(props);
    this.state = {
        componentData: {},
        modalIsOpen: false,
    }
    this.cleanObject = this.center code hereleanObject.bind(this);
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.update = this.update.bind(this);
  }

  componentDidMount() {
    this.setState({
      componentData: this.props.componentData
    })
  }

  componentWillReceiveProps(nextProps){
    this.setState({
      componentData: nextProps.componentData
    })
  }

  openModal(){
    this.setState({
      modalIsOpen: true,
    })
  }

  closeModal(){
    this.setState({
      modalIsOpen: false,
    })
  }

  update(key, subKey, k, values){
    // this.setState({
    //   modalIsOpen: true,
    // })
    console.log("key: " + key)
  }

  cleanObject(obj1){
    const obj = Object.assign({}, obj1);
    delete obj.__v;
    delete obj._id;
    delete obj.name;
    return obj;
  }

  render() {
    return(
        <div>
          <Modal
            isOpen={this.state.modalIsOpen}
            onRequestClose={this.closeModal}
            contentLabel="Add Expense"
            className="Modal">

            <form>
              <input type="text"/>: 
              <input type="text"/>
            </form>

          </Modal>

          {Object.keys(this.state.componentData).map((key, i) => {
            return (
              <TreeView 
                key={i}
                nodeLabel={key}
                // defaultCollapsed={true}
              > <button>Add Row</button>
                {Object.keys(this.state.componentData[key]).map((subKey, j) => {
                  return (
                    <TreeView
                      key={j}
                      nodeLabel={subKey}
                      // defaultCollapsed={true}
                    > <button>Add Row</button>
                      {this.state.componentData[key][subKey].map((superSubComponent, k) => {
                        <div>{superSubComponent = this.cleanObject(superSubComponent)}</div>
                        return(
                          <TreeView
                            key={k}
                            nodeLabel={k}
                            // defaultCollapsed={true}
                          > <button>Add Key and Value</button>
                            {Object.keys(superSubComponent).map((values, l) => {
                              return (
                                // <div key={l}>{values}: {superSubComponent[values]}<button onClick={this.update}>Edit</button><button>Delete</button></div>
                                <div key={l}>
                                  <div className="key">{values}: </div>
                                  <div className="value">{superSubComponent[values]}</div>
                                  <button onClick={this.update(key, subKey, k, values)}>Edit</button><button>Delete</button>
                                </div>
                              )
                            })}
                          </TreeView>
                        )
                      })}
                    </TreeView>
                  )
                })}
              </TreeView>
            )
          })}
        </div>
    );
  }
}

我想componentData用this.update. 有人可以给我一些建议吗？我尝试更新状态，update()但我得到maximum update depth exceeded. componentData我的主要目标是更新TreeStructure组件，然后用它来更新 mongo 数据库。由于架构不固定，我认为替换数据库中的整个文档可能是最好的选择。所以我需要 compoentData作为文件。

标签： reactjsjsx

解决方案

问题在这里：

onClick={this.update(key, subKey, k, values)}

你在渲染时调用它，调用更新状态，触发重新渲染，再次执行该调用，依此类推。给onClick一个函数：

onClick={() => this.update(key, subKey, k, values)}

推荐阅读