React函数组件不使用Class如何实现点击修改人员名称的功能

函数组件中要实现响应式状态修改，需要使用React内置的useState Hook，无需使用Class组件即可实现和this.setState等价的效果。

修复步骤 #

1. 首先导入useState

import React, { useState } from 'react'
import Person from './Person/Person'

2. 将普通const变量替换为useState定义的响应式状态
   useState接收初始状态作为参数，返回一个长度为2的数组：第一个元素是状态变量，第二个元素是专门用来修改该状态的方法。

// 替换原来的const persons定义
const [persons, setPersons] = useState({
  persons: [
    { name: 'Jose', age: 32},
    { name: 'Gabriel', age: 2}
  ]
})

3. 修改switchNameHandler方法，调用上面得到的修改状态的方法setPersons更新状态

const switchNameHandler = () => {
  setPersons({
    persons: [
      { name: 'Jose Fernando', age: 32},
      { name: 'Gabriel', age: 2}
    ]
  })
}

优化建议 #

当前你把数组套在额外的对象层里没有必要，可以直接把人员数组作为状态，简化代码：

// 定义状态时直接存数组
const [persons, setPersons] = useState([
  { name: 'Jose', age: 32},
  { name: 'Gabriel', age: 2}
])

// 修改状态时直接传新数组
const switchNameHandler = () => {
  setPersons([
    { name: 'Jose Fernando', age: 32},
    { name: 'Gabriel', age: 2}
  ])
}

// 渲染时直接取状态值，不需要多写一层.persons
return (
  <div className="App">
    <h1>Hi, I'm a React App!</h1>
    <button onClick={switchNameHandler}> Switch Name</button>
    <Person name={persons[0].name} age={persons[0].age}/>
    <Person name={persons[1].name} age={persons[1].age}> I like play</Person>
  </div>
)

注意点 #

useState的更新方法是全量替换而非和旧状态合并，如果你需要保留旧状态里的其他属性，需要手动解构旧状态再新增/修改属性，示例：

setPersons(prevState => {
  return {
    ...prevState,
    // 只修改需要改的字段
    persons: [newPersonsArray]
  }
})

内容的提问来源于stack exchange，提问作者Jose Herrera