Apakah yang perlu saya lakukan jika paparan tindak balas tidak dikemas kini?

藏色散人
Lepaskan: 2022-12-29 10:21:03
asal
2252 orang telah melayarinya

Paparan tindak balas tidak dikemas kini kerana tugasan tatasusunan diluluskan melalui rujukan: 1. Buka fail tindak balas yang sepadan; .data] ;" Kaedah tatasusunan baharu boleh digunakan untuk mengemas kini paparan.

Apakah yang perlu saya lakukan jika paparan tindak balas tidak dikemas kini?

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Apakah yang perlu saya lakukan jika paparan tindak balas tidak dikemas kini?

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: &#39;100%&#39;}}
           columns={this.state.columns}
           data={this.state.data}
       />
       <Button type="primary" onClick={this.addData.bind(this)}>添加</Button>
     </div>
    );
  }
  addData () {
    let obj = {
      date: &#39;2018-05-07&#39;,
      name: &#39;小明&#39;,
      address: &#39;&#39;
    };
    let data = this.state.data;
    data.push(obj);
    this.setState({
      data: data
    });
    console.log(this.state);
  }
}
export default App;
Salin selepas log masuk

Dalam kod di atas, apabila menetapkan nilai data melalui setState, didapati bahawa paparan tidak dikemas kini kerana tugasan tatasusunan diluluskan melalui rujukan, data = 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 mendapati bahawa data dalam keadaan tidak berubah, jadi paparan tidak dikemas kini Pada masa ini, tatasusunan baharu boleh digunakan:

 let data = [...this.state.data];
Salin selepas log masuk

Kod. ditukar kepada:

import React, { Component } from &#39;react&#39;;
import &#39;./App.css&#39;;
import Todo from &#39;./components/todo/index&#39;
import { Table, Button } from &#39;element-react&#39;;
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: &#39;2016-05-02&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1518 弄&#39;
      }, {
        date: &#39;2016-05-04&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1517 弄&#39;
      }, {
        date: &#39;2016-05-01&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1519 弄&#39;
      }, {
        date: &#39;2016-05-03&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1516 弄&#39;
      },{
        date: &#39;2016-05-02&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1518 弄&#39;
      }, {
        date: &#39;2016-05-04&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1517 弄&#39;
      }, {
        date: &#39;2016-05-01&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1519 弄&#39;
      }, {
        date: &#39;2016-05-03&#39;,
        name: &#39;王小虎&#39;,
        address: &#39;上海市普陀区金沙江路 1516 弄&#39;
      }]
    }
  }
  render() {
    return (
     <div>
       <Todo list={this.state.data}/>
       <Table
           style={{width: &#39;100%&#39;}}
           columns={this.state.columns}
           data={this.state.data}
       />
       <Button type="primary" onClick={this.addData.bind(this)}>添加</Button>
     </div>
    );
  }
  addData () {
    let obj = {
      date: &#39;2018-05-07&#39;,
      name: &#39;小明&#39;,
      address: &#39;&#39;
    };
    let data = [...this.state.data];
    data.push(obj);
    this.setState({
      data: data
    });
    console.log(this.state);
  }
}
export default App;
Salin selepas log masuk

Selepas membandingkan data Jika anda tahu cara bertindak balas, ia akan mengesan perubahan lama dan baharu serta mengemas kini dom

Pembelajaran yang disyorkan: "bertindak balas tutorial video"

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika paparan tindak balas tidak dikemas kini?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan