Reaksiyon Formu'ndaki sahne değişikliği durumunun güncellenmesi

Bir React formuyla ilgili sorun yaşıyorum ve durumu düzgün bir şekilde yönetiyorum. Bir formda (modal) bir zaman girdi alanı var. Başlangıç ​​değeri bir durum değişkeni olarak ayarlanır getInitialStateve bir üst bileşenden iletilir. Bu kendi içinde iyi çalışıyor.

Üst bileşen aracılığıyla varsayılan başlangıç_zamanı değerini güncellemek istediğimde sorun geliyor. Güncellemenin kendisi üst bileşende aracılığıyla gerçekleşir setState start_time: new_time. Ancak formumda, varsayılan başlangıç_zamanı değeri hiçbir zaman değişmez, çünkü yalnızca bir kez tanımlanır getInitialState.

componentWillUpdateDurumda bir değişikliği zorlamak için kullanmaya çalıştım setState start_time: next_props.start_time, bu gerçekten işe yaradı, ama bana Uncaught RangeError: Maximum call stack size exceededhata verdi .

Benim sorum şu, bu durumda durumu güncellemenin doğru yolu nedir? Bunu bir şekilde yanlış mı düşünüyorum?

Mevcut Kod:

@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

tepki 16'dan beri componentWillReceiveProps sınırlandırılmıştır: bunun yerine getDerivedStateFromProps kullanın

Doğru anlarsam start_time, ModalBodybileşeni kendi durumuna atayan bir üst bileşene sahip misiniz ? Ve o zamanı bir alt bileşenden değil, üst öğeden güncellemek istiyorsunuz.

React'in bu senaryo ile başa çıkma konusunda bazı ipuçları var. (Not, bu web'den kaldırılmış eski bir makaledir. İşte bileşen sahne hakkındaki mevcut dokümana bir bağlantı ).

Durum oluşturmak için sahne kullanımı getInitialStategenellikle "gerçeğin kaynağı" nın, yani gerçek verilerin olduğu yerde çoğaltılmasına yol açar. Bunun nedeni isegetInitialState , yalnızca bileşen ilk oluşturulduğunda çağrılmasıdır.

Mümkün olduğunda, daha sonra senkronizasyondan çıkmamalarını ve bakım sorunlarına neden olmalarını sağlamak için değerleri anında hesaplayın.

Temel olarak, bir ebeveyne propsbir çocuğa atadığınızda staterender yöntemi her zaman prop güncellemesinde çağrılmaz. componentWillReceivePropsYöntemi kullanarak manuel olarak çağırmanız gerekir .

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 });
  }
}

Görünüşe göre işler değişiyor .... getDerivedStateFromProps () artık tercih edilen işlevdir.

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
  }
}

(danburzo @ github tarafından yukarıdaki kod)

componentWillReceiveProps "genellikle hatalara ve tutarsızlıklara yol açar" nedeniyle kullanımdan kaldırılıyor.

Dışarıdan bir şey değişirse, alt bileşeni tamamen sıfırlamayı düşününkey .

Alt keybileşene bir destek sağlamak, keydışarıdan yapılan değişikliklerin değeri ne zaman olursa olsun , bu bileşenin yeniden oluşturulmasını sağlar. Örneğin,

<EmailInput
  defaultEmail={this.props.user.email}
  key={this.props.user.id}
/>

Performansı hakkında:

Bu yavaş gibi görünse de , performans farkı genellikle önemsizdir. Bileşenlerin, bu alt ağaç için fark atlandığı için güncellemeler üzerinde çalışan ağır mantık varsa, bir anahtar kullanmak daha da hızlı olabilir.

Ayrıca componentDidUpdate kullanılabilir.

İşlev imza:

componentDidUpdate(prevProps, prevState, snapshot)

Bileşen güncellendiğinde DOM üzerinde çalışma fırsatı olarak bunu kullanın. Başlangıçta çağrılmaz render.

Bkz Sen Muhtemelen Devlet Türetilmiş gerekmez ikisi için Anti-Desen açıklanır Madde, componentDidUpdateve getDerivedStateFromProps. Bunu çok kullanışlı buldum.

Bunu yapmanın yeni kanca yolu eski bileşenWillReceiveProps yerine useEffect kullanmaktır:

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 });
  }
}

fonksiyonel bir kanca tahrikli bileşende aşağıdaki gibidir:

// store the startTime prop in local state
const [startTime, setStartTime] = useState(props.startTime)
// 
useEffect(() => {
  if (props.startTime !== startTime) {
    setStartTime(props.startTime);
  }
}, [props.startTime]);

setState'i kullanarak durumu ayarlıyoruz, useEffect'i kullanarak belirtilen pervane değişikliklerini kontrol ediyoruz ve pervane değişikliğindeki durumu güncellemek için harekete geçiyoruz.

Muhtemelen Türetilmiş Duruma İhtiyacınız Yok

1. Üst öğeden bir anahtar ayarlayın

Bir anahtar değiştiğinde, React geçerli olanı güncellemek yerine yeni bir bileşen örneği oluşturur. Tuşlar genellikle dinamik listeler için kullanılır, ancak burada da yararlıdır.

2. getDerivedStateFromProps/ kullanıncomponentWillReceiveProps

Anahtar bir nedenden dolayı çalışmazsa (belki de bileşeni başlatmak çok pahalıdır)

Kullanarak getDerivedStateFromPropsdurumun herhangi bir bölümünü sıfırlayabilirsiniz, ancak şu anda biraz hatalı görünüyor (v16.7)!, Kullanım için yukarıdaki bağlantıya bakın

Tepki belgelerinden: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

Sahne değişikliği bir Anti Desen olduğunda silme durumu

React 16'dan beri componentWillReceiveProps kullanımdan kaldırılmıştır. Reaksiyon belgelerinden, bu durumda önerilen yaklaşım

1. Tamamen bileşen kontrollü: ParentComponentait ModalBodysahibi olacak start_timedevlet. Bu durumda benim tercih ettiğim yaklaşım bu değil çünkü modalın bu duruma sahip olması gerektiğini düşünüyorum.
2. Tamamen kontrolsüz bileşen bir anahtarla: bu benim tercih yaklaşımım. Reaksiyon belgelerinden bir örnek: https://codesandbox.io/s/6v1znlxyxn . start_timeDevletin sizin için tamamen sahibi olacaksınız ve daha önce yaptığınız gibi ModalBodykullanabilirsiniz getInitialState. Durumu sıfırlamak için start_timeanahtarıParentComponent

Dokümanlarından oldukça açık:

If you used componentWillReceiveProps for re-computing some data only when a prop changes, use a memoization helper instead.

Kullanın: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization

Notu Kullan

Operasyonun durum türevi, gerçek bir türeve ihtiyaç duyulmadan sahne malzemelerinin doğrudan manipülasyonudur. Başka bir deyişle, doğrudan kullanılabilen veya dönüştürülebilen bir pervane varsa, pervane durumunu depolamaya gerek yoktur .

Durum değerinin start_timebasitçe pervane olduğu göz önüne alındığında , pervane start_time.format("HH:mm")içinde yer alan bilgiler zaten kendi içinde bileşeni güncellemek için yeterlidir.

Ancak, yalnızca pervane değişikliğinde biçimi çağırmak istediyseniz, bunu en son belgelere göre yapmanın doğru yolu Memoize aracılığıyla olacaktır: https://reactjs.org/blog/2018/06/07/you-probably-dont- gerek türetilmiş-state.html # what-yaklaşık-memoization

Ref kullanımının benim için güvenli olduğunu düşünüyorum, yukarıdaki bazı yöntemlerle ilgilenmiyorum.

class Company extends XComponent {
    constructor(props) {
        super(props);
        this.data = {};
    }
    fetchData(data) {
        this.resetState(data);
    }
    render() {
        return (
            <Input ref={c => this.data['name'] = c} type="text" className="form-control" />
        );
    }
}
class XComponent extends Component {
    resetState(obj) {
        for (var property in obj) {
            if (obj.hasOwnProperty(property) && typeof this.data[property] !== 'undefined') {
                if ( obj[property] !== this.data[property].state.value )
                    this.data[property].setState({value: obj[property]});
                else continue;
            }
            continue;
        }
    }
}