редактируемый JSON и SetState в реакции

Question

Я пытаюсь отобразить группу объектов json, используя карту в текстовой области.Пользователь может отредактировать его, но я должен проверить, что все json действительны, прежде чем он перейдет на мой сервер.

У меня проблема с анализом, где мне его анализировать?Разобрав его на onChange, но это опасно.

onChange = (e, idx) => {
    this.setState({
      data: this.state.data.map((o,i) => {
        if(i === idx){
          return JSON.parse(e.target.value) //dangerous
        }
        return o
      })
    })
  }

https://codesandbox.io/s/880414y0m0

Answer 1

Вы можете сделать что-то вроде этого:

onChange = (e, idx) => {

    let  dataToSet = [...this.state.data]
    let error = false
    try {
      dataToSet = dataToSet.map((o,i) => {
        if(i === idx){
          return JSON.parse(e.target.value) //dangerous
        }
        return o
      })
    } catch(e) {
       error = true
    }
    this.setState({
      data: dataToSet,
      error,
    })
 }

Вот ссылка кодов и ящиков, которая обрабатывает этот сценарий. codesandbox