(资料图片仅供参考)
本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。
react视图不更新怎么办？
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 (
); } 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的值发现视图并没有更新，原因是数组的赋值是引用传递的，data = this.state.data是执行data这个数组的内存，所以执行data.push(obj)实际上相当于执行了 this.state.data.push(obj),所以react的虚拟dom发现state里面的data没有变化，所以不更新视图,而这时可以使用一个新数组：
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 (
); } 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;登录后复制这样data比对以后会react会检测新旧的变化而更新dom
推荐学习：《react视频教程》
以上就是react视图不更新怎么办的详细内容，更多请关注php中文网其它相关文章！
关键词： 金沙江路
