React中setState后如何在同函数用新状态并复用tasksSetter？

针对你遇到的setProjects后调用tasksSetter时状态未更新的问题，同时要保持tasksSetter的复用性且遵循DRY原则，有两种可行方案：

方案一：为tasksSetter增加可选参数，直接传入更新后的状态 #

修改tasksSetter，允许传入自定义的projects数组（默认使用当前状态的projects），这样在handleNewProject里可以提前计算出更新后的projects，直接传给tasksSetter，无需等待状态异步更新：

const { setTasks, projects, setProjects } = useContext(TasksContext)
const [input, setInput] = useState('')

// 修改后的tasksSetter，增加customProjects可选参数
const tasksSetter = (findKey, customProjects = projects) => {
  const obj = customProjects?.find(project => Object.keys(project)[0] === findKey)
  const taskArray = obj ? Object.values(obj) : []
  setTasks(taskArray)
}

const handleNewProject = () => {
  if (!input.trim()) return // 过滤空输入
  const newProject = {[input]: {}}
  const updatedProjects = [...projects, newProject]
  
  setProjects(updatedProjects)
  tasksSetter(input, updatedProjects) // 直接传入更新后的数组
  setInput('')
}

复用示例 #

在其他地方调用tasksSetter时，无需传第二个参数，直接使用默认的当前状态projects即可：

<button onClick={() => tasksSetter('现有项目名称')}>切换到该项目</button>

方案二：抽离公共逻辑，在setState回调中处理 #

把查找项目、转换任务数组的逻辑抽成公共函数，既可以在tasksSetter中复用，也可以在setProjects的回调里直接使用，避免重复代码：

const { setTasks, projects, setProjects } = useContext(TasksContext)
const [input, setInput] = useState('')

// 抽离公共逻辑函数
const getTaskArrayByKey = (targetKey, targetProjects) => {
  const obj = targetProjects?.find(project => Object.keys(project)[0] === targetKey)
  return obj ? Object.values(obj) : []
}

// 复用公共逻辑的tasksSetter
const tasksSetter = (findKey) => {
  const taskArray = getTaskArrayByKey(findKey, projects)
  setTasks(taskArray)
}

const handleNewProject = () => {
  if (!input.trim()) return
  // 利用setState的回调获取最新prevState，直接处理tasks
  setProjects((prevState) => {
    const updatedProjects = [...prevState, {[input]: {}}]
    const taskArray = getTaskArrayByKey(input, updatedProjects)
    setTasks(taskArray)
    return updatedProjects
  })
  setInput('')
}

两种方案都能解决异步状态更新的问题，同时保持tasksSetter的复用性，避免代码重复。

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