反応ビューが更新されない場合はどうすればよいですか?

配列の割り当てが参照によって渡されるため、反応ビューは更新されません。解決策は次のとおりです: 1. 対応する反応ファイルを開きます。 2. "let data = [...this.state" を使用します。 .data] ;"新しい配列メソッドを使用してビューを更新できます。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応ビューが更新されない場合はどうすればよいですか?

React 配列の変更によってビューは更新されません

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;

上記のコードでは、データの値は setState によって設定され、ビューは次のようになります。その理由は、配列の割り当てが参照によって渡され、data = this.state.data がデータ配列の実行に使用されるメモリであるため、data.push(obj) の実行は実際には this.state の実行と同等であるためです。 .data.push(obj) なので、react の仮想 dom が検索します 状態のデータは変更されていないため、ビューは更新されません この時点では、新しい配列を使用できます:

 let data = [...this.state.data];

コードは次のとおりですに変更されました:

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;

このようにして、データを比較した後、react は新しいものと古いものを検出します。変更を加えて dom を更新します

推奨される学習: "react ビデオ チュートリアル"

以上が反応ビューが更新されない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。