如何在ReactJs中将json的对象替换为另一个json的对象

Question

我有JSON的{​​{1}}请求调用，如下所示：

fetch

我所做的是找到类型为1的对象并将其添加到类型为2的对象中。现在看起来像这样：

[{
    "type": "1",
    "First": {
      "nameFirst": "",
      "Id": ""
    }
  },
  {
    "type": "2",
    "Second": [{
        "nameSecond": "",
        "Id": ""
      },
      {
        "nameSecond": "",
        "Id": ""
      },
      {
        "nameSecond": "",
        "Id": ""
      },
      {
        "nameSecond": "",
        "Id": ""
      }
    ]
  }
]

在[{ "nameSecond": "", "Id": "", "First": { "nameFirst": "", "Id": "" } }, { "nameSecond": "", "Id": "", "First": { "nameFirst": "", "Id": "" } }, { "nameSecond": "", "Id": "", "First": { "nameFirst": "", "Id": "" } }, { "nameSecond": "", "Id": "", "First": { "nameFirst": "", "Id": "" } } ] 中，此render的数据将由JSON返回。 由{this.renderLibrary()}请求调用的另一个JSON如下所示：

fetch

如您所见，上面的[{ "type": "1", "First": { "nameFirst": "", "id": "" } }, { "type": "1", "First": { "nameFirst": "", "id": "" } }, { "type": "1", "First": { "nameFirst": "", "id": "" } }, { "type": "1", "First": { "nameFirst": "", "id": "" } }] 是由一些对象组成的数组，这些对象在前JSON中看起来是type=1的对象。 在JSON中，此render的数据将由JSON返回。 {this.renderLibraryFirst()}的每个对象在以下位置都包含onclick函数：

JSON

我想要的是，当运行<div onClick={((e) => this.ChangeObjectFirst(e, i))}>Change</div> 时，单击该对象将被ChangeObjectFirst的对象type=1 JSON替换，并且将显示新数据。 我该如何解决这个问题？这是我的一部分代码：

{this.renderLibrary()}

编辑：

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        dataFlight: [],
        library: null,
        libraryFlight: null,
    }
}
componentDidMount() {
    fetch('/json.bc', {
        method: 'POST',
    })
        .then(response => response.text())
        .then(text => {
            const Maindata = JSON.parse(text.replace(/\'/g, '"'))
            const { First } = Maindata.find(a => a.type === "1") || {}
            const MergedData = Maindata.filter(a => a.type === "2")
                .map(a => {
                    const Second = a.Second.map(b => ({ ...b, First }))
                    return { ...a, Second }
                })
            const MergedDataFinal = MergedData[0].Second
            this.setState(state => ({
                ...state,
                data: MergedDataFinal
            }), () => {
                this.reorganiseLibrary()
            })
        }).catch(error => console.error(error))





        fetch('/new-josn.bc', {
            method: 'POST',
        })
            .then(response => response.text())
            .then(text => {
                const Maindata = JSON.parse(text.replace(/\'/g, '"'))
                this.setState(state => ({
                    ...state,
                    dataFlight: Maindata
                }), () => {
                    this.reorganiseLibraryFlight()
                })
            }).catch(error => console.error(error))

}

reorganiseLibrary = () => {
    const { data } = this.state;
    let library = data;
    library = _.chunk(library);
    this.setState({
        library

    })
}

reorganiseLibraryFlight = () => {
    const { dataFlight } = this.state;
    let libraryFlight = dataFlight
    libraryFlight = _.chunk(libraryFlight);
    this.setState({
        libraryFlight
    })
}

handlePerPage = evt => {
    this.setState({
        perPage: evt.target.value
    }, () => this.reorganiseLibrary());
    this.setState({
        perPage: evt.target.value
    }, () => this.reorganiseLibraryFlight());
}


renderLibrary = () => {
    const { library } = this.state;
    if (!library || (library && library.length === 0)) {
        return <div className="nodata">NoData</div>
    }
    return library.map((item, i) => (
        <div className="Wrapper-List">
            <div><span>{item.First.nameFirst}</span></div>
            <span>{item.nameSecond}</span>
        </div>
    ))
}

renderLibraryFirst = () => {
    const { libraryFlight } = this.state;
    if (!libraryFlight || (libraryFlight && libraryFlight.length === 0)) {
        return ''
    }
    return libraryFlight.map((item, i) => (
        <div className="Wrapper-ChangeObjectFirst">
             <div><span>{item.First.nameFirst}</span></div>
            <div onClick={((e) => this.ChangeObjectFirst(e, i))}>Change</div>
        </div>
    ))
}


render() {
    const { library, libraryFlight } = this.state;
    return (
        <div>
            {this.renderLibrary()}
            {this.renderLibraryFirst()}
        </div>
    )
}
}
ReactDOM.render(<App />, document.getElementById('Result'))