配列の割り当てが参照によって渡されるため、反応ビューは更新されません。解決策は次のとおりです: 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: '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;上記のコードでは、データの値は 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: '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;このようにして、データを比較した後、react は新しいものと古いものを検出します。変更を加えて dom を更新します
推奨される学習: "react ビデオ チュートリアル"
以上が反応ビューが更新されない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
react中canvas的用法是什么Apr 27, 2022 pm 03:12 PM在react中，canvas用于绘制各种图表、动画等；可以利用“react-konva”插件使用canvas，该插件是一个canvas第三方库，用于使用React操作canvas绘制复杂的画布图形，并提供了元素的事件机制和拖放操作的支持。
react中antd和dva是什么意思Apr 21, 2022 pm 03:25 PM在react中，antd是基于Ant Design的React UI组件库，主要用于研发企业级中后台产品；dva是一个基于redux和“redux-saga”的数据流方案，内置了“react-router”和fetch，可理解为应用框架。
React是双向数据流吗Apr 21, 2022 am 11:18 AMReact不是双向数据流，而是单向数据流。单向数据流是指数据在某个节点被改动后，只会影响一个方向上的其他节点；React中的表现就是数据主要通过props从父节点传递到子节点，若父级的某个props改变了，React会重渲染所有子节点。
react中为什么使用nodeApr 21, 2022 am 10:34 AM因为在react中需要利用到webpack，而webpack依赖nodejs；webpack是一个模块打包机，在执行打包压缩的时候是依赖nodejs的，没有nodejs就不能使用webpack，所以react需要使用nodejs。
react是组件化开发吗Apr 22, 2022 am 10:44 AMreact是组件化开发；组件化是React的核心思想，可以开发出一个个独立可复用的小组件来构造应用，任何的应用都会被抽象成一颗组件树，组件化开发也就是将一个页面拆分成一个个小的功能模块，每个功能完成自己这部分独立功能。
react和reactdom有什么区别Apr 27, 2022 am 10:26 AMreact和reactdom的区别是：ReactDom只做和浏览器或DOM相关的操作，例如“ReactDOM.findDOMNode()”操作；而react负责除浏览器和DOM以外的相关操作，ReactDom是React的一部分。
react中forceupdate的用法是什么Apr 19, 2022 pm 12:03 PM在react中，forceupdate()用于强制使组件跳过shouldComponentUpdate()，直接调用render()，可以触发组件的正常生命周期方法，语法为“component.forceUpdate(callback)”。
react有没有双向绑定Apr 21, 2022 am 10:24 AMreact中没有双向绑定；react的设计思想就是单向数据流，没有双向绑定的概念；react是view层，单项数据流只能由父组件通过props将数据传递给子组件，满足了view层渲染的要求并且更易测试与控制，所以在react中没有双向绑定。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
ホットトピック
7434
15135952