Обновление данных о состоянии в формате вложенного объекта в реакции с использованием метода setState

Question

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 в качестве документа.

Answer 1

Проблема здесь:

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

вы вызываете его при рендеринге, вызов обновляет состояние, которое вызывает повторный рендеринг, который снова выполняет этот вызов, и так далее.Вместо этого дайте onClick функцию:

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