时间戳

首页 > 解决方案 > 如何使用 useState 处理对象值？

reactjs - 如何使用 useState 处理对象值？

问题描述

我是新来的胡克。在我的项目中，const state 是一个对象，state.boolean = false，state.number = 1

我有一个与唯一 state.number 关联的输入框，那么我的 handleChange 函数应该是什么？

function handleChange(value){
  setState(value.number)
}

是不正确的。

非常感谢

标签： reactjsreact-hooks

解决方案

您仍然可以使用useState钩子及其关联的 setState 函数更新对象的某些部分：

const initialValue = {
  boolean: false,
  number: 1
}

const [value, setValue] = useState(initialValue)

function updateNumberPartOfState = number => {
  setValue({
    ...value,
    number: number
  })
}

function updateBooleanPartOfState = boolean => {
  setValue({
    ...value,
    boolean: boolean
  })
}

或者像 Andrew Li 评论的那样，为每个变量设置一个单独的 setState 值/函数对：

const [boolean, setBoolean] = useState(false)
const [number, setNUmber] = useState(1)

注意：实际上不要使用booleanor number，因为它们非常接近保留术语Booleanand Number，而且我很确定 typescript 使用小写值作为保留字。

推荐阅读