Question

我正在尝试为我的模型制作一个编辑表单，并将表单的初始值设置为模型的值。我试过了：

import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getPost, destroyPost } from '../../actions/posts'
import { useHistory } from "react-router-dom";


const Edit = ({ match }) => {
  const dispatch = useDispatch()
  const history = useHistory()
  const post = useSelector(state => state.post)
  const postId = match.params.id

  const handleClick = () => {
    dispatch(destroyPost(postId))
    history.push("/")
  }
  const [formData, setFormData] = useState({
    title: post.attributes.title,
    body: post.attributes.body
  })

  useEffect(() => {
    dispatch(getPost(postId))
  }, [])

 

  if (!post) { return <div>Loading...</div>}

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(formData)
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>  
          {/* form stuff */}
      </form>
    </div>
  )
  

}

export default Edit

基本上，我从我的 redux 存储中获取 post 对象并使用这些值在我的组件中设置我的状态。当然，这是在我的 api 带着我的帖子数据返回之前加载的，所以我没有定义。

我试过在

下设置状态

  if (!post) { return <div>Loading...</div>}

但我得到了一个无限循环。

我什至尝试过类似的东西

useState({
    title: post? post.attributes.title : '',
    body: post? post.attributes.body : ''
  }

但这行不通。

在其他应用中，我为表单使用了一种容器元素并将模型作为道具传递，但我不确定是否需要这样做或者是否有更好的方法。

Answer 1

如果你的 post 初始值是 null 那么你需要用 optional Chaining this as 保护你的初始状态数据

const [formData, setFormData] = useState({
    title: post?.attributes?.title || '',
    body: post?.attributes?.body || ''
  })

您在安装组件时触发 API 调用，这将更新 store 中的 post 状态。你需要的是另一个使用 Effect 它将监视帖子并在它更改时触发。

useEffect(() => {
    if(post){
      setFormData({
      title: post?.attributes?.title || '',
      body: post?.attributes?.body || ''
})
 }
}, [post])

在 useEffect 中添加 post 作为依赖项。

如何使用 Redux 商店中的 useState 钩子设置初始值？

1 个答案: