Bereaksi: mengapa komponen anak tidak diperbarui ketika prop berubah

Mengapa dalam contoh pseudo-code berikut, Child tidak merender ulang ketika Container berubah foo.bar?

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

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

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

Bahkan jika saya menelepon forceUpdate()setelah mengubah nilai dalam Container, Child masih menunjukkan nilai lama.

Perbarui anak untuk memiliki atribut 'kunci' sama dengan nama. Komponen akan merender ulang setiap kali kunci berubah.

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

Karena anak-anak tidak rerender jika alat peraga orang tua berubah, tetapi jika NEGARA nya berubah :)

Apa yang Anda perlihatkan adalah ini: https://facebook.github.io/react/tips/communicate-between-components.html

Ini akan meneruskan data dari orangtua ke anak melalui alat peraga tetapi tidak ada logika rerender di sana.

Anda perlu mengatur beberapa status ke orangtua lalu rerender anak pada status perubahan orangtua. Ini bisa membantu. https://facebook.github.io/react/tips/expose-component-functions.html

Saya memiliki masalah yang sama. Ini solusi saya, saya tidak yakin itu adalah praktik yang baik, beri tahu saya jika tidak:

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

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

UPD: Sekarang Anda dapat melakukan hal yang sama menggunakan React Hooks: (hanya jika komponen berfungsi)

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

Menurut komponen filosofi React tidak dapat mengubah alat peraga. mereka harus diterima dari orang tua dan harus tidak berubah. Hanya orang tua yang dapat mengubah properti anak-anaknya.

penjelasan bagus tentang negara vs alat peraga

juga, baca utas ini. Mengapa saya tidak dapat memperbarui alat peraga di react.js?

Anda harus menggunakan setStatefungsi. Jika tidak, nyatakan tidak akan menyimpan perubahan Anda, tidak peduli bagaimana Anda menggunakan forceUpdate.

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

Kode Anda sepertinya tidak valid. Saya tidak dapat menguji kode ini.

Saat membuat komponen Bereaksi dari functionsdan useState.

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

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

Ini tidak bekerja

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

Ini bekerja (menambahkan kunci)

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

Dikonfirmasi, menambahkan Kunci berfungsi. Saya membaca dokumen untuk mencoba dan memahami mengapa.

Bereaksi ingin menjadi efisien ketika membuat komponen anak. Itu tidak akan membuat komponen baru jika itu sama dengan anak lain, yang membuat halaman memuat lebih cepat.

Menambahkan kekuatan kunci Bereaksi untuk membuat komponen baru, sehingga mengatur ulang status untuk komponen baru itu.

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

Gunakan fungsi setState. Jadi kamu bisa melakukannya

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

di dalam metode pegangan acara.

Setelah, negara diperbarui, itu akan memicu perubahan, dan render ulang akan terjadi.

Anda mungkin harus menjadikan Anak sebagai komponen fungsional jika tidak mempertahankan status apa pun dan cukup membuat alat peraga lalu memanggilnya dari induknya. Alternatif untuk ini adalah bahwa Anda dapat menggunakan kait dengan komponen fungsional (useState) yang akan menyebabkan komponen stateless kembali di-render.

Anda juga sebaiknya tidak mengubah propa karena tidak dapat diubah. Pertahankan status komponen.

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

Saya mengalami masalah yang sama. Saya memiliki Tooltipkomponen yang menerima showTooltipprop, bahwa saya memperbarui pada Parentkomponen berdasarkan suatu ifkondisi, Parentkomponen itu semakin diperbarui tetapi Tooltipkomponen tidak merender.

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

Kesalahan yang saya lakukan adalah menyatakan showTooltipsebagai let.

Saya menyadari apa yang saya lakukan salah saya melanggar prinsip-prinsip bagaimana rendering bekerja, Menggantinya dengan kait melakukan pekerjaan.

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

mendefinisikan alat peraga yang diubah di mapStateToProps metode koneksi dalam komponen anak.

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

export default connect(mapStateToProps)(ChannelItem);

Dalam kasus saya, saluran channelList diperbarui jadi saya menambahkan chanelList di mapStateToProps

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

contoh ini digunakan useEffectuntuk mengubah status saat propsperubahan.