使用 useState 更新嵌套对象的值答案

【问题标题】：update the value of nested objects using useState使用 useState 更新嵌套对象的值
【发布时间】：2021-08-21 13:01:12
【问题描述】：

对于表单验证，我使用了 useState 挂钩。下面是代码

const [address, setAddress] = useState(shippingAddress.address)
  const [city, setCity] = useState(shippingAddress.city)
  const [postalCode, setPostalCode] = useState(shippingAddress.postalCode)
  const [country, setCountry] = useState(shippingAddress.country)

  const [formState, setFormState] = useState({
    formErrors: { address: '', city: '', postalCode: '', country: '' },
    addressValid: false,
    cityValid: false,
    postalCodeValid: false,
    countryValid: false,
    formValid: false,
  })

  const dispatch = useDispatch()
  useEffect(() => {
    const prevState = { ...formState }
    if (address === '') {
      prevState.formErrors.address = 'address not valid'
      prevState.addressValid = false
      setFormState(prevState)
    }

代码继续...

我无法更新 formErrors.address 值。它在浏览器中显示错误：

TypeError: Cannot set property 'address' of undefined

useEffect(() => {
  const prevState = { ...formState }
   if (address === '') {
      prevState.formErrors.address = 'address not valid'
      prevState.addressValid = false
     setFormState(prevState)
  }

【问题讨论】：

console.log(prevState) 使用前
您共享的代码不能成为此错误的来源，因为它不包含可能将 formErrors 分配给 null/undefined 的代码。在您的代码 formErrors 的某处被设置为空/未定义。请提供其余代码以查看将 formErrors 设置为 null 的位置。另外作为旁注，您正在改变状态，因为 formErrors 是一个对象，而 prevState 对 formErrors 对象具有相同的引用。看看这个stackoverflow.com/questions/58171407/…。 const prevState = { ...formState }

标签： reactjs react-redux react-hooks use-state

【解决方案1】：

如上所述，我们需要查看您设置分配的代码，但在 useEffect 中，您可以使用烘焙的 prevState（实际上是当前状态）来消除一些混乱进入useState。然后，您真的只关心 address 何时更改，而不是每次都运行它。

useEffect(() => {
   if (address === '') {
     setFormState(prevState =>( {
       ...prevState,
       formErrors.address = 'address not valid',
       addressValid: false
       }))
  },[address])

【讨论】：

formErrors.address = 'address not valid', 在那个位置有效吗？
另外，要在这样的箭头函数中返回对象文字，您需要将其包装在 ()