ReactJS嵌套JSON对象到输入更新处理程序？

Question

我正在创建一个JSON编辑器，如果对象是input，则渲染string，如果对象不是string，它将对对象运行递归。

Object是包含strings/objects的字符串或对象。

data: {
  "title": "title",
  "description": "description",
  "errors": {
    "error1": "man",
    "erro2": "female"
  },
  "popups": {
    "main": {
      "1": "two",
      "two": "three"
    },
    "main2": {
      "2": "3",
      "tw": "tww"
    }
  }
}

我创建了以下递归函数来显示它：

  convertData(data) {
    return Object.keys(data).reduce((arr, key) => {
      const value = data[key];
      if(typeof value === "string") {
        arr.push(
          key.includes("Paragraph") || key.includes("Description") ? 
            <textarea>{value}</textarea> :
            <input type="text" value={value} onChange={
              (e) => {
                this.setState({
                  data: {
                    ...this.state.data,
                   [key] : e.target.value
                  }
                 })
              }
            } />
        );
      }
      else {
        arr.push(
          <fieldset>
            <legend>{key}</legend>
            <div style={{padding: "20px"}}>{this.convertData(value)}</div>
          </fieldset>
        );
      }
      return arr;
    }, []);
  }

我试图为onChange添加一个回调函数，它会将值更改为此对象中的给定输入，但是如果我尝试修改嵌套输入，它会创建一个新字符串到JSON对象的根目录。

我做错了什么？

Answer 1

使用this.setState的引用复制之前的状态时，this.state调用看起来很可疑。如何使用callback version of setState？

(e) => {
    this.setState(state => ({
        ...state,
        data: {
            ...state.data,
            [key] : e.target.value
        }
    }))
}