Pertanyaan Memperbarui status pada perubahan alat peraga dalam Bentuk Bereaksi


Saya mengalami masalah dengan bentuk React dan mengelola negara dengan benar. Saya memiliki bidang input waktu dalam bentuk (dalam modal). Nilai awal ditetapkan sebagai variabel status dalam getInitialState, dan diteruskan dari komponen induk. Ini sendiri berfungsi dengan baik.

Masalahnya muncul ketika saya ingin memperbarui nilai default start_time melalui komponen induk. Pembaruan itu sendiri terjadi di komponen induk melalui setState start_time: new_time. Namun dalam formulir saya, nilai default start_time tidak pernah berubah, karena hanya ditentukan satu kali getInitialState.

Saya telah mencoba menggunakan componentWillUpdate untuk memaksa perubahan keadaan melalui setState start_time: next_props.start_time, yang benar-benar bekerja, tetapi memberi saya Uncaught RangeError: Maximum call stack size exceeded kesalahan.

Jadi pertanyaan saya adalah, apa cara yang benar untuk memperbarui keadaan dalam kasus ini? Apakah saya berpikir tentang hal ini salah entah bagaimana?

Kode Saat Ini:

@ModalBody = React.createClass
  getInitialState: ->
    start_time: @props.start_time.format("HH:mm")

  #works but takes long and causes:
  #"Uncaught RangeError: Maximum call stack size exceeded"
  componentWillUpdate: (next_props, next_state) ->
    @setState(start_time: next_props.start_time.format("HH:mm"))

  fieldChanged: (fieldName, event) ->
    stateUpdate = {}
    stateUpdate[fieldName] = event.target.value
    @setState(stateUpdate)

  render: ->
    React.DOM.div
      className: "modal-body"
      React.DOM.form null,
        React.createElement FormLabelInputField,
          type: "time"
          id: "start_time"
          label_name: "Start Time"
          value: @state.start_time
          onChange: @fieldChanged.bind(null, "start_time”)

@FormLabelInputField = React.createClass
  render: ->
    React.DOM.div
      className: "form-group"
      React.DOM.label
        htmlFor: @props.id
        @props.label_name + ": "
      React.DOM.input
        className: "form-control"
        type: @props.type
        id: @props.id
        value: @props.value
        onChange: @props.onChange

75
2017-09-05 14:39


asal


Jawaban:


Jika saya mengerti dengan benar, Anda memiliki komponen induk yang lewat start_time ke bawah ModalBody komponen yang memberikannya ke negara sendiri? Dan Anda ingin memperbarui waktu itu dari induk, bukan komponen anak.

Bereaksi memiliki beberapa tips untuk menangani skenario ini. (Perhatikan, ini adalah artikel lama yang telah dihapus dari web. Berikut tautan ke saat ini doc pada props komponen).

Menggunakan alat bantu untuk menghasilkan status di getInitialState sering mengarah ke duplikasi "sumber kebenaran", yaitu di mana data sebenarnya. Hal ini karena getInitialState hanya dipanggil ketika komponen pertama kali dibuat.

Kapan pun memungkinkan, hitung nilai on-the-fly untuk memastikan bahwa mereka tidak keluar dari sinkronisasi di kemudian hari dan menyebabkan masalah pemeliharaan.

Pada dasarnya, setiap kali Anda menetapkan orang tua props kepada seorang anak state metode render tidak selalu dipanggil pada pembaruan prop. Anda harus memohonnya secara manual, menggunakan componentWillReceiveProps metode.

componentWillReceiveProps(nextProps) {
  // You don't have to do this check first, but it can help prevent an unneeded render
  if (nextProps.startTime !== this.state.startTime) {
    this.setState({ startTime: nextProps.startTime });
  }
}

180
2017-09-05 15:29



Rupanya hal-hal berubah .... getDerivedStateFromProps () sekarang menjadi fungsi yang disukai.

class Component extends React.Component {
  static getDerivedStateFromProps(props, current_state) {
    if (current_state.value !== props.value) {
      return {
        value: props.value,
        computed_prop: heavy_computation(props.value)
      }
    }
    return null
  }
}

(di atas kode oleh danburzo @ github)


15
2018-04-17 01:02



Ada juga componentDidUpdate tersedia.

Fungsi signatur:

componentDidUpdate(prevProps, prevState, snapshot)

Gunakan ini sebagai peluang untuk beroperasi di DOM ketika komponen telah diperbarui. Tidak dipanggil pada awal render.

Lihat Anda Mungkin Tidak Perlu Berasal Artikel, yang menggambarkan Anti-Pola untuk keduanya componentDidUpdate dan getDerivedStateFromProps. Saya merasa ini sangat berguna.


1
2017-07-08 07:47