React正常运行的setState函数在Next.js中失效问题求助

核心问题 #

1. 页面刷新导致状态丢失：你用window.location.assign("/admin/blog-edit")会触发整页刷新，Next.js会重新初始化_app.tsx的所有状态，之前调用setPostToEdit的修改还没来得及生效就被重置回初始值了。
2. 异步状态更新的误解：React的setState是异步操作，调用setPostToEdit后立刻console.log(postToEdit)，打印的还是旧状态，这是正常现象，不是状态没更新。
3. 数据类型不匹配：从你打印的newPostToEdit[0]能看出，接口返回的是数组，但你直接把整个数组传给setPostToEdit，而初始状态是单个对象，类型不匹配会导致状态更新异常。

修复步骤 #

1. 用Next.js客户端导航替代页面刷新：导入useRouter钩子，用router.push跳转，这样不会刷新页面，状态能保留。
2. 修正状态更新的参数：把setPostToEdit(newPostToEdit)改成setPostToEdit(newPostToEdit[0])，确保传入的是单个文章对象。
3. 正确调试异步状态：如果要查看更新后的状态，用useEffect监听postToEdit的变化，或者用setState的回调函数。

修改后的代码示例 #

import '../styles/globals.css'
import React, { useState, useEffect } from 'react'
import type { AppProps } from 'next/app'
import Layout from '../components/Layout'
import { useRouter } from 'next/router' // 导入useRouter

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter() // 初始化router
  const initPostToEdit = {
    post_id: '',
    title: 'initial post title',
    sub_title: '',
    main_content: '',
    post_url: 'initial URL',
    page_title: '',
    meta_description: '',
    meta_keywords: ''
  }

  const [posts, setPosts] = useState([]);
  const [postToEdit, setPostToEdit] = useState(initPostToEdit);
  const [blogValues, setBlogValues] = useState(initPostToEdit);

  // 监听postToEdit变化，调试用
  useEffect(() => {
    console.log('更新后的postToEdit:', postToEdit)
  }, [postToEdit])

  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])

      // 用router.push进行客户端导航，不刷新页面
      router.push("/admin/blog-edit");

    } 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>
      <Layout>
        <Component
          {...pageProps}
          editPost={editPost}
          postToEdit={postToEdit}
          setPostToEdit={setPostToEdit}
          blogValues={blogValues}
          setBlogValues={setBlogValues}
          posts={posts}
          deletePost={deletePost}
        />
      </Layout>
    </div>
  )
}

额外说明 #

• 客户端导航（router.push）是Next.js推荐的跳转方式，能保留应用的状态和上下文，避免不必要的页面刷新。
• 确保你的接口返回的newPostToEdit数组中确实包含有效文章对象，如果接口设计可以返回单个对象，那更合理，也不用取[0]。

内容的提问来源于stack exchange，提问作者user3285962