如何在下拉列表选择ReactJS上更改对象数组中的值

Question

在页面加载时，我得到的值有点像这样

{
...,
 "availabilities": [
      {
        "date": "2017-09-22",
        "start_time": "07:45 AM",
        "map_img_url": "gogia_event_maps.jpg",
        "redirect_url": "someplace,
        "lat": "19.0480326",
        "lng": "72.9169889",
        "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"

      },
      {
        "date": "2017-10-15",
        "start_time": "07:45 AM",
         "map_img_url": "gogia_event_maps.jpg",
      "redirect_url": "/Raheja+Acropolis+2",
      "lat": "19.0480326",
      "lng": "72.9169889",
      "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
      },
      {
        "date": "2017-10-21",
        "start_time": "05:01 AM",
         "map_img_url": "gogia_event_maps.jpg",
      "redirect_url": "https://www.google.co.in/maps/place/Raheja+Acropolis+2",
      "lat": "19.0480326",
      "lng": "72.9169889",
      "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
      },
      {
        "date": "2017-10-22",
        "start_time": "05:02 AM",
         "map_img_url": "/gogia_event_maps.jpg",
      "redirect_url": "Raheja+Acropolis+2",
      "lat": "19.0480326",
      "lng": "72.9169889",
      "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
      }],
...
}

我的UI有一个选择组件，用户可以从中选择JSON上的不同日期表单。我所需要的是我剩下的UI组件也应该根据日期的选择来更改？

Answer 1

我认为你所要求的是当你改变一个元素时，它的状态会更新。我认为你的问题在于，你试图将整个对象从state放入数组中。但是您应该只过滤输出中的数组，以显示正确的值。

​

class SlectElement extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      availabilities: []
    }
    this.updateAvailabilities = this.updateAvailabilities.bind(this);
  }

  updateAvailabilities(e) {
    const stateCopy = Object.assign({}, this.state);
    stateCopy.availabilities = e.target.value;
    return this.setState(stateCopy);
  }

  render() {

    const availabilities = [
      {
        "date": "2017-09-22",
        "start_time": "07:45 AM",
        "map_img_url": "gogia_event_maps.jpg",
        "redirect_url": "someplace",
        "lat": "19.0480326",
        "lng": "72.9169889",
        "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"

      },
      {
        "date": "2017-10-15",
        "start_time": "07:45 AM",
        "map_img_url": "gogia_event_maps.jpg",
        "redirect_url": "/Raheja+Acropolis+2",
        "lat": "19.0480326",
        "lng": "72.9169889",
        "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
      },
      {
        "date": "2017-10-21",
        "start_time": "05:01 AM",
        "map_img_url": "gogia_event_maps.jpg",
        "redirect_url": "https://www.google.co.in/maps/place/Raheja+Acropolis+2",
        "lat": "19.0480326",
        "lng": "72.9169889",
        "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
      },
      {
        "date": "2017-10-22",
        "start_time": "05:02 AM",
        "map_img_url": "/gogia_event_maps.jpg",
        "redirect_url": "Raheja+Acropolis+2",
        "lat": "19.0480326",
        "lng": "72.9169889",
        "formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
      }];

    console.log(availabilities.filter(av => av.date === this.state.availabilities)[0]);
    return (<div>
      <select
        onChange={this.updateAvailabilities}>
        {availabilities.map((item) => {
          return (<option key={item.date} value={item.date}>{item.date}</option>);
        })}
      </select>
      <br />

      {availabilities.length ?
        JSON.stringify(availabilities.filter(av => av.date === this.state.availabilities)[0])
        : null
      }
    </div>);
  }
}

ReactDOM.render(
  <SlectElement name="World" />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

​