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

Question

我已按如下请求JSON调用：fetch

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

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

[{
    "nameSecond": "",
    "Id": "",
    "First": {
      "nameFirst": "",
      "Id": ""
    }
  },
  {
    "nameSecond": "",
    "Id": "",
    "First": {
      "nameFirst": "",
      "Id": ""
    }
  },
  {
    "nameSecond": "",
    "Id": "",
    "First": {
      "nameFirst": "",
      "Id": ""
    }
  },
  {
    "nameSecond": "",
    "Id": "",
    "First": {
      "nameFirst": "",
      "Id": ""
    }
  }
]

在renderthis 的数据中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=1first的对象JSON。在renderthis 的数据中JSON将由{this.renderLibraryFirst()}. 每个对象都JSON包含一个 onclick 函数：

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

编辑：

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        dataNewJson: [],
        library: null,
        libraryNewJson: null,
        perPage: 5,
        currentPage: 1,
        maxPage: null,
        perPageNewJson: 3,
        currentPageNewJson: 1,
        maxPageNewJson: 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,
                dataNewJson: Maindata
            }), () => {
                this.reorganiselibraryNewJson()
            })
        }).catch(error => console.error(error))

}

reorganiseLibrary = () => {
    const { perPage, data } = this.state;
    let library = data;
    library = _.chunk(library, perPage);
    this.setState({
        library,
        currentPage: 1,
        maxPage: library.length === 0 ? 1 : library.length
    })
}

reorganiselibraryNewJson = () => {
    const { perPageNewJson, dataNewJson } = this.state;
    let libraryNewJson = dataNewJson
    libraryNewJson = _.chunk(libraryNewJson, perPageNewJson);
    this.setState({
        libraryNewJson,
        currentPageNewJson: 1,
        maxPageNewJson: libraryNewJson.length === 0 ? 1 : libraryNewJson.length
    })
}


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


renderLibrary = () => {
    const { library, currentPage } = this.state;
    if (!library || (library && library.length === 0)) {
        return ''
    }
    return library[currentPage - 1].map((item, i) => (
        <span>{item.nameSecond}</span>

    ))
}

renderLibraryFirst = () => {
    const { libraryNewJson, currentPageNewJson } = this.state;
    if (!libraryNewJson || (libraryNewJson && libraryNewJson.length === 0)) {
        return ''
    }
    return libraryNewJson[currentPageNewJson - 1].map((item, i) => (
        <div onClick={((e) => this.ChangeObjectFirst(e, i))}>Change</div>

    ))
}


render() {
    const { library,libraryNewJson } = this.state;
    return (
        <div>
            {this.renderLibrary()}
            {this.renderLibraryFirst()}
        </div>
    )
}
ChangeObjectFirst = (e, i) => {
    const itemToReplace = this.state.libraryNewJson[i];
    console.log(itemToReplace) // It is an array by 3 objects ,because I have  3 pages  
    let { library } = this.state;
    library = library.map(el => {
        el['First'] = Object.assign({}, itemToReplace);
    });
    this.setState({ library: library });
    //// and By clicking there is this error:TypeError: library[(currentPage - 1)] is undefined
}
}
ReactDOM.render(<App />, document.getElementById('Result'))