如何处理可变数据类型的状态？

可变参数是那些其值可以在作为参数传递到的函数中修改的参数。这意味着当函数调用者函数时，其值将绑定到被调用函数中的参数，这意味着对该函数中的值所做的任何更改也将反映在调用者的参数中。函数。

状态在反应组件中是可变的。为了使 React 应用程序具有交互性，我们几乎在每个 React 组件中都使用了状态。状态用一些值初始化，并且基于用户与应用程序的交互，我们使用 setState 方法在某个时间点更新组件的状态。如果 React 组件的状态是用数组或 JavaScript 对象初始化的，最好不要通过修改旧数组或对象本身来更改状态，而是使用一些内置的 JavaScript 方法，如 map、filter 或使用新的 JavaScript 语法，如 spread 以整体返回新更新的状态。

示例 1：在这个示例中，我们将创建一个待办事项应用程序，用户将在其中交互并存储他或她想做的事情，这基本上是一个可变状态。

• index.js：

  
  
  
  
  
  
  
  
  

• 应用程序.js：

  Javascript

  import React from 'react'
  import TodoList from './TodoList'
    
  const App = () => {
    return 
  }
    
  export default App
  

• TodoList.js：

  Javascript

  import React, { Component } from 'react'
  import TodoForm from './TodoForm'
    
  class TodoList extends Component{
    constructor(props){
      super(props)
      this.state = { todos : [] }
      this.createTodo = this.createTodo.bind(this)
      this.renderTodos = this.renderTodos.bind(this)
    }
    
    createTodo(todo){
      this.setState({
        
        // Changing state with returning new list of todos
        // as a whole not modyfying the old list of todos
        todos : [...this.state.todos, todo]
      })
    }
    
    
    renderTodos(){
      const todos = this.state.todos.map(todo => (
        
  
          {todo.task}
        
      ))
      return 
  {todos}
    }
    
    render(){
      return(
        
  
          
  Todo List
          {this.renderTodos()}
          
        
      )
    }
  }
    
  export default TodoList
  

• TodoForm.js：

  Javascript

  import React, { Component } from 'react'
    
  class TodoForm extends Component{
    constructor(props){
      super(props)
    
      this.state = { task:'' }
      this.handleChange = this.handleChange.bind(this)
      this.handleSubmit = this.handleSubmit.bind(this)
    }
    
    handleChange(event){
      this.setState({
        [event.target.name] : event.target.value
      })
    }
    
    handleSubmit(event){
      event.preventDefault()
      this.props.create(this.state)
      this.setState({ task : '' })
    }
    
    render(){
      return(
        
  
          
  
            New Todo
            
            Add New Todo
          
        
      )
    }
  }
    
  export default TodoForm
  

输出：

示例 2：在此示例中，我们将从已创建的列表中删除项目，使其变为空白，这也是一个可变状态。

• index.js：

  Javascript

  import React from 'react'
  import ReactDOM from 'react-dom'
  import App from './App'
    
  ReactDOM.render(, document.querySelector('#root'))
  

• 应用程序.js：

  Javascript

  import React from 'react'
  import ItemsList from './ItemsList'
    
  const App = (props) => {
    return 
  }
    
  App.defaultProps = {
    items : [
      {
        id : 1,
        label : 'First Item'
      },
      {
        id : 2,
        label : 'Second Item'
      },
      {
        id : 3,
        label : 'Third Item'
      },
      {
        id : 4,
        label : 'Fourth Item'
      },
      {
        id : 5,
        label : 'Fifth Item'
      }
    ]
  }
    
  export default App
  

• 项目列表.js：

  Javascript

  import React, { Component } from 'react'
  import Item from './Item'
    
  class TodoList extends Component{
    constructor(props){
      super(props)
      this.state = { items : this.props.items}
      this.renderItems = this.renderItems.bind(this)
      this.removeItem = this.removeItem.bind(this)
    } 
    
    removeItem(target){
      this.setState({
        
        // Changing state with returning new list of 
        // todos as a whole not modyfying the old 
        // list of todos
        items : this.state.items.filter(item => {
          return item.id !== target.id
        })
      })
    }
    
    renderItems(){
      const items = this.state.items.map(item => (
        
      ))
      return 
  {items}
    }
    
    render(){
      return(
        
  
          
  Items List
          {this.renderItems()}
        
      )
    }
  }
    
  export default TodoList
  

• 项目.js：

  Javascript

  import React from 'react'
    
  const Item = ({item, remove}) => {
    const handleClick = () => {
      remove(item)
    }
    
    return(
      
  
        {item.label}
         X 
      
    )
  }
    
  export default Item
  

输出 ：