


Apakah yang perlu saya lakukan jika halaman tatasusunan tindak balas tidak dimuatkan semula?
Jan 18, 2023 pm 02:33 PMHalaman tatasusunan tindak balas tidak dimuat semula kerana tugasan tatasusunan diluluskan melalui rujukan tatasusunan baharu "let data = [...this.state.data];" sudah memadai.
Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.
Apakah yang perlu saya lakukan jika halaman tatasusunan tindak balas tidak dimuatkan semula?
Perubahan tatasusunan tindak balas tidak menyebabkan kemas kini paparan
import React, { Component } from 'react'; import './App.css'; import Todo from './components/todo/index' import { Table, Button } from 'element-react'; class App extends Component { constructor(props) { super(props); this.state = { columns: [ { label: "日期", prop: "date", width: 180 }, { label: "姓名", prop: "name", width: 180 }, { label: "地址", prop: "address" } ], data: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' },{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } render() { return ( <div> <Todo list={this.state.data}/> <Table style={{width: '100%'}} columns={this.state.columns} data={this.state.data} /> <Button type="primary" onClick={this.addData.bind(this)}>添加</Button> </div> ); } addData () { let obj = { date: '2018-05-07', name: '小明', address: '' }; let data = this.state.data; data.push(obj); this.setState({ data: data }); console.log(this.state); } } export default App;
Dalam kod di atas, nilai data ditetapkan melalui setState dan didapati paparan tidak dikemas kini. Sebabnya ialah tugasan tatasusunan diluluskan melalui data rujukan = this.state.data ialah memori yang digunakan untuk melaksanakan tatasusunan data, jadi melaksanakan data.push(obj) sebenarnya bersamaan dengan melaksanakan this.state.data. push(obj), jadi dom maya react mencari data dalam keadaan Tiada perubahan, jadi paparan tidak dikemas kini dan tatasusunan baharu boleh digunakan pada masa ini:
let data = [...this.state.data];
The kod ditukar kepada:
import React, { Component } from 'react'; import './App.css'; import Todo from './components/todo/index' import { Table, Button } from 'element-react'; class App extends Component { constructor(props) { super(props); this.state = { columns: [ { label: "日期", prop: "date", width: 180 }, { label: "姓名", prop: "name", width: 180 }, { label: "地址", prop: "address" } ], data: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' },{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } render() { return ( <div> <Todo list={this.state.data}/> <Table style={{width: '100%'}} columns={this.state.columns} data={this.state.data} /> <Button type="primary" onClick={this.addData.bind(this)}>添加</Button> </div> ); } addData () { let obj = { date: '2018-05-07', name: '小明', address: '' }; let data = [...this.state.data]; data.push(obj); this.setState({ data: data }); console.log(this.state); } } export default App;
Dengan cara ini, selepas membandingkan data, bertindak balas akan mengesan yang baharu dan lama Kemas kini dom dengan perubahan
Pembelajaran yang disyorkan: ". tutorial video reaksi"
Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika halaman tatasusunan tindak balas tidak dimuatkan semula?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Bagaimana untuk mengalih keluar elemen pendua dari tatasusunan PHP menggunakan gelung foreach?

Penyepaduan rangka kerja Java dan rangka kerja React bahagian hadapan

Pembalikan nilai kunci tatasusunan PHP: analisis perbandingan prestasi kaedah yang berbeza

Seni PHP Array Deep Copy: Menggunakan Kaedah Berbeza untuk Mencapai Salinan Sempurna

Amalan pengisihan pelbagai dimensi tatasusunan PHP: daripada senario mudah kepada kompleks

Aplikasi fungsi pengelompokan tatasusunan PHP dalam pengisihan data

Amalan Terbaik untuk Menyalin Dalam Tatasusunan PHP: Temui Kaedah Cekap

Peranan fungsi pengelompokan tatasusunan PHP dalam mencari elemen pendua
