json - 如何在 reactjs 中从 event.target.value 创建 JSON 对象

Question

我是一名从事项目的学生，我对编程原理只有基本的了解。它是一个反应项目，将实时火车到达数据作为 JSON 对象获取，然后允许用户选择到达保存列表的到达。

我可以使用下面的代码获取数据并显示正常，

getArrivals(){
fetch(`https://transportapi.com/v3/uk/train/station/${this.state.stationname}/live.json?app_id=********&app_key=**********************************&darwin=false&train_status=passenger&type=arrival`)
.then(arrivals => arrivals.json())
 .then(data => this.setState({ arrivals : data.arrivals.all }));
 

}

并以此显示选择列表，

            <form onSubmit={this.saveArrival} onChange={this.savedArrival}> 
            
            <select> value={this.state.arrivals.map(arrival => (
               <option key={arrival.origin_name} > {arrival.aimed_arrival_time} From: {arrival.origin_name} Status: {arrival.status} Expected arrival time: {arrival.expected_arrival_time}</option>
             )) }</select>  
             
            
              <p>select arrival to save</p>
              <input type='submit' />
              
              </form> 

我可以将提交的数据保存到一个名为 selectedArrivals 的状态变量中，但是它存储为一个字符串。和，

   saveArrival = (event) => {
  event.preventDefault();
  let selArrive = JSON.stringify(this.state.selectedArrival);
  alert("You have saved arrival : " + this.state.selectedArrival);
   console.log(this.state.selectedArrival)
   }

和

  savedArrival = (event) => {
  event.preventDefault();
  const selectedIndex = event.target.options.selectedIndex;
  this.setState({Schedlued_time: 
 event.target.options[selectedIndex].getAttribute('aimed_arrival_time')});
  this.setState({selectedArrival: [event.target.value]});

 }

我想让 event.target.value 保存为 JSON 对象，然后发送到云数据库。诸如“预计到达时间”之类的项目应该是 id，所以我可以在数据库中对它们进行排序。

我确定有办法做到这一点，但只是看不到如何实现它。任何帮助或建议将不胜感激。

标签： jsonreactjs