Tepki: prop değiştiğinde alt bileşen neden güncellenmiyor?

Neden aşağıdaki sözde kod örneğinde Kapsayıcı foo.bar'ı değiştirdiğinde Child yeniden oluşturmuyor?

Container {
  handleEvent() {
    this.props.foo.bar = 123
  },

  render() {
    return <Child bar={this.props.foo.bar} />
}

Child {
  render() {
    return <div>{this.props.bar}</div>
  }
}

forceUpdate()Kapsayıcıdaki değeri değiştirdikten sonra çağırsam bile , Çocuk hala eski değeri gösteriyor.

Alt öğe, "anahtar" özniteliği ada eşit olacak şekilde güncelleyin. Bileşen, anahtar her değiştiğinde yeniden oluşturulur.

Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}

Çünkü çocuklar, ebeveynin sahne öğeleri değişirse, ancak STATE değişirse yeniden işlemez :)

Gösterdiğiniz şey şudur: https://facebook.github.io/react/tips/communicate-between-components.html

Verileri props aracılığıyla ebeveynden çocuğa aktarır, ancak orada yeniden oluşturma mantığı yoktur.

Ebeveyn için bir durum ayarlamanız ve ardından çocuğu ebeveyn değişim durumuna ayarlamanız gerekir. Bu yardımcı olabilir. https://facebook.github.io/react/tips/expose-component-functions.html

Ben de aynı sorunu yaşadım. Bu benim çözümüm, bunun iyi uygulama olduğundan emin değilim, değilse söyle:

state = {
  value: this.props.value
};

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
    this.setState({value: this.props.value});
  }
}

UPD: Artık aynı şeyi React Hooks kullanarak yapabilirsiniz: (yalnızca bileşen bir işlevse)

const [value, setValue] = useState(propName);
// This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);

React felsefesine göre bileşen, sahne alanını değiştiremez. ebeveynden alınmalı ve değişmez olmalıdır. Yalnızca ebeveyn, çocuklarının dekorlarını değiştirebilir.

devlet vs sahne hakkında güzel açıklama

ayrıca, bu konuyu okuyun React.js'de propları neden güncelleyemiyorum?

setStateFonksiyonu kullanmalısınız . Değilse, forceUpdate'i nasıl kullanırsanız kullanın, durum değişikliğinizi kaydetmez.

Container {
    handleEvent= () => { // use arrow function
        //this.props.foo.bar = 123
        //You should use setState to set value like this:
        this.setState({foo: {bar: 123}});
    };

    render() {
        return <Child bar={this.state.foo.bar} />
    }
    Child {
        render() {
            return <div>{this.props.bar}</div>
        }
    }
}

Kodunuz geçerli görünmüyor. Bu kodu test edemiyorum.

React bileşenlerini functionsve useState.

const [drawerState, setDrawerState] = useState(false);

const toggleDrawer = () => {
      // attempting to trigger re-render
      setDrawerState(!drawerState);
};

Bu does not işleri

         <Drawer
            drawerState={drawerState}
            toggleDrawer={toggleDrawer}
         />

Bu işe yarıyor (anahtar ekleyerek)

         <Drawer
            drawerState={drawerState}
            key={drawerState}
            toggleDrawer={toggleDrawer}
         />

Onaylandı, Anahtar eklemek işe yarıyor. Nedenini anlamaya çalışmak için belgelerin üzerinden geçtim.

React, alt bileşenler oluştururken verimli olmak ister. Başka bir alt öğe ile aynıysa yeni bir bileşen oluşturmaz, bu da sayfanın daha hızlı yüklenmesini sağlar.

Bir Anahtar eklemek React'i yeni bir bileşen oluşturmaya zorlar ve böylece bu yeni bileşen için Durum'u sıfırlar.

https://reactjs.org/docs/reconciliation.html#recursing-on-children

SetState işlevini kullanın. Böylece yapabilirsin

       this.setState({this.state.foo.bar:123}) 

handle olay yönteminin içinde.

Durum güncellendikten sonra değişiklikleri tetikleyecek ve yeniden oluşturma gerçekleşecektir.

Herhangi bir durumu korumazsa ve basitçe sahne donanımını işler ve sonra onu ebeveynden çağırırsa, muhtemelen Çocuğu işlevsel bileşen olarak yapmalısınız. Buna alternatif, durum bilgisiz bileşenin yeniden oluşturulmasına neden olacak işlevsel bileşenle (useState) kancalar kullanabilmenizdir.

Ayrıca propaları değişmez olduklarından değiştirmemelisiniz. Bileşenin durumunu koruyun.

Child = ({bar}) => (bar);

Ben de aynı problemle karşılaşıyordum. Destek Tooltipalan bir bileşenim vardı , bir koşula bağlı olarak bileşen üzerinde güncelleme yapıyordum, bileşende güncelleniyordu ancak bileşen oluşturulmuyordu.showTooltipParentifParentTooltip

const Parent = () => {
   let showTooltip = false;
   if(....){ showTooltip = true; }
   return(
      <Tooltip showTooltip={showTooltip}></Tooltip>
   )
}

Yaptığım hata showTooltipizin olarak ilan etmekti .

Neyi yanlış yaptığımı anladım Rendering'in nasıl çalıştığına dair ilkeleri ihlal ediyordum, onu kancalarla değiştirmek işi yaptı.

const [showTooltip, setShowTooltip] =  React.useState<boolean>(false);

alt bileşendeki connect yönteminin mapStateToProps'unda değişen props tanımlayın.

function mapStateToProps(state) {
  return {
    chanelList: state.messaging.chanelList,
  };
}

export default connect(mapStateToProps)(ChannelItem);

Benim durumumda, channelList'in kanalı güncellendi, bu yüzden mapStateToProps'a chanelList ekledim

export default function DataTable({ col, row }) {
  const [datatable, setDatatable] = React.useState({});
  useEffect(() => {
    setDatatable({
      columns: col,
      rows: row,
    });
  /// do any thing else 
  }, [row]);

  return (
    <MDBDataTableV5
      hover
      entriesOptions={[5, 20, 25]}
      entries={5}
      pagesAmount={4}
      data={datatable}
    />
  );
}

bu örnek useEffect, değiştirildiğinde durumu propsdeğiştirmek için kullanılır.