React 修改数据

feyman很努力

于 2022-05-10 19:44:10 发布

阅读量1.5k

点赞数

分类专栏： React 文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_56195392/article/details/124695827

版权

React 专栏收录该内容

10 篇文章

订阅专栏

此博客展示了React中如何在类组件`Test`中管理状态，包括初始化状态、更新状态（通过浅拷贝避免直接修改）、添加数据、修改数据（如修改年龄和姓名）以及删除数据（使用filter方法）。文章通过具体的代码实例解释了React状态更新的原则和方法，并提供了增加和删除状态数据的按钮操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React from "react"

class Test extends React.Component {
  state = {
    count: 0,
    list: [1, 2, 3, 4, 5],
    person: { name: '张三', age: 18 }


  }
  //修改数据(不要直接修改状态的值，而是基于当前状态值创建新的状态值)
  //添加数据
  changeState = () => {

    this.setState({
      list: [...this.state.list, 6],
      person: {
        ...this.state.person,
        age: this.state.person.age + 1,
        name: '李四'

      }
    }
    )
  }
  //修改数据
  //删除数据
  //调用filter方法 过滤需要删除的数据

  delState = () => {
    this.setState({
      list: this.state.list.filter((item, index) =>
        index !== 2
      )
    })


  }



  render () {
    return (
      <div>
        <ul>
          {this.state.list.map((item) =>
            <li key={item}>{item}</li>
          )}
        </ul>
        <div>{this.state.person.age}{this.state.person.name}</div>

        <button onClick={this.changeState}>changeState</button>
        <button onClick={this.delState}>delState</button>

      </div>
    )
  }
}




function App () {
  return (
    <div className="App">
      <Test />
    </div>
  )
}

export default App