为什么当道具改变时我的页面没有重新呈现？ React新手用头撞墙两天

Question

I'm working on my first React app (a simple blog site) after doing a few tutorials, and I've been struggling with this issue for two days now. Would love some help on this one!

My site lists blog posts which it pulls from the database, and I have an edit button next to a list of posts. When I push the button I query the database to pull all the data for the post in question, and send it via a prop to the edit component.

import React, {useEffect, useState} from 'react'
import BlogPostEdit from './BlogPostEdit';


const initPostToEdit = {
  post_id: 49,
  title: 'test title 2',
  sub_title: 'test sub-title',
  main_content:'test content',
  post_url:'test-url',
  page_title:'',
  meta_description:'',
  meta_keywords:''
  }

export default function BlogPostList() {
    const [posts, setPosts] = useState([]);   
    const [postToEdit, setPostToEdit] = useState(initPostToEdit);   

    const deletePost = async (id) => {
        try {
            await fetch(`http://localhost:5001/blog-edit/${id}`, {
                method: "DELETE"
            })
            setPosts(posts.filter(post => post.post_id !== id))
        } catch (error) { 
            console.error(error.message)      
        }
    }

    const editPost = async (id) => {
        try {
            const response = await fetch(`http://localhost:5001/blog-edit/${id}`, {
                method: "GET"
            })
            const newPostToEdit = await response.json();
            setPostToEdit(newPostToEdit[0]);
        } catch (error) { 
            console.error(error.message)      
        }
    }
    
    const getPosts = async () => {
        try {
            const response = await fetch("http://localhost:5001/blog-edit");
            const jsonData = await response.json();
            setPosts(jsonData);
        } catch (error) { 
            console.error(error.message)      
        }
    }
    useEffect(() => {getPosts();}, [])

  return (

    <div>
   
  <BlogPostEdit postToEdit = {postToEdit} /> 

  <h1> List of Blog Posts</h1>

  <div className="container">
          
  <table className="table table-striped">
    <thead>
      <tr>
        <th>Title</th>
        <th>Date</th>
        <th>Content</th>
        <th>Edit</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      {posts.map(post => (
              <tr key={post.post_id}>
              <td>{post.title}</td>
              <td>{post.post_date}</td>
              <td>{post.main_content.slice(0,100)}</td>
              <td>
                <button
                 className="btn btn-success"
                 onClick={ () => editPost(post.post_id)}
                 >
                Edit</button></td>
              <td>
                <button 
                className="btn btn-danger"
                onClick={() => deletePost(post.post_id)}
                >
                Delete</button></td>
              
            </tr>

      ))}  
    </tbody>
  </table>
</div>  
    </div>
  )
  
}

In the edit component, the props pass along an initial filler/dummy info which populate the edit form fine. But I can't figure out how to populate the form with info from the post I want to edit, in such a way that I can submit the form and modify the database.

import React, { useState, useEffect } from 'react'

    export default function BlogPostEdit(props) {
        const [blogValues, setBlogValues] = 
        useState(props.postToEdit);
             
        const changeHandler = e => {
         setBlogValues({...blogValues, [e.target.name]: 
         e.target.value});
        }
            
        return (
          <div>
            <h1 className='text-center mt-5'>Edit Blog Post</h1>
            <form className="mt-5" onSubmit={ onSubmitForm }>
      
              <label htmlFor="title">Blog Post Title</label>
              <input
                id="title"
                name="title"
                type="text" 
                className='form-control'
                value={ blogValues.title } 
                onChange = { changeHandler }
              />
              
              <label htmlFor="sub_title">Blog Post Sub-Title</label>
              <input
                id="sub_title"
                name="sub_title"
                type="text" 
                className='form-control'
                value={blogValues.sub_title}
                onChange = {changeHandler}
              />
      
              <label htmlFor="main_content">Blog Post Content</label>
              <input
                id="main_content"
                name="main_content"
                type="text" 
                className='form-control'
                value={blogValues.main_content}
                onChange = {changeHandler}
              />
      
              <label htmlFor="post_url">Blog Post URL</label>
              <input
                id="post_url"
                name="post_url"
                type="text" 
                className='form-control'
                value={blogValues.post_url}
                onChange = {changeHandler}
              />
      
              <label htmlFor="page_title">Blog Post Page 
              Title</label>
              <input
                id="page_title"
                name="page_title"
                type="text" 
                className='form-control'
                value={blogValues.page_title}
                onChange = {changeHandler}
              />
              <label htmlFor="meta_description">Meta 
               Description</label>
              <input
                id="meta_description"
                name="meta_description"
                type="text" 
                className='form-control'
                value={blogValues.meta_description}
                onChange = {changeHandler}
              />
      
              <label htmlFor="meta_keywords">Meta Keywords</label>
              <input
                id="meta_keywords"
                name="meta_keywords"
                type="text" 
                className='form-control'
                value={blogValues.meta_keywords}
                onChange = {changeHandler}
              />
              <button className='btn btn-success'>Submit 
              Edits</button>
            </form>
          </div>
        )
}

        

If I console.log the props in the BlogPostEdit function, I can see them changing to reflect me choosing different posts to edit. The only way I can get this to reflect in the edit form is by using something like value = {props.propsToEdit.title} in the form. But when I do this, whenever I try to make edits to the form it immediately reverts to the original title.

When I try to use the useState update function (setBlogValues), to reflect the new prop values, I get errors saying too many renders are happening.

I hope this makes sense. Again, any help appreciated!

Answer 1

You should not write the props.postToEdit on the useState hook, simply execute the function and pass on the post id you would like to edit. You're currently using the state for the function and for manipulating your state, this wont simply work.