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

Question

I'm trying to make an edit form for my model and set the initial values of the form to the values of the model. I've tried:

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

Basically, I'm taking the post object from my redux store and using those values to set my state in my component. This, of course, is loading before my api comes back with my post data so I get undefined.

I've tried setting state under

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

but I get an infinite loop.

I've even tried something like

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

But that's not working.

In other apps, I used a kind of container element for my form and passed the model as a prop, but I'm not sure if I need to do that or if there's a better way.

Answer 1

If your initial value of post is null then you need to guard your initial state data with optional Chaining this as

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

You are firing the API call when the component is mounted which will update the post state in the store. What you need is another use Effect which will watch for the post and fires when it changes.

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

Add post as the dependency in the useEffect .