Javascript 为什么赢了'；是否不再运行我的API获取并将结果保存到状态？ 目标：

请注意，所使用的示例并非我项目的确切上下文，而是非常相似的，因此为了本文的目的而进行了简化

我正在尝试使用WP-API来使用Wordpress类别、帖子标题和帖子内容来生成一个动态的React应用程序

每一条信息都在React应用程序的生成过程中发挥作用：

• Wordpress类别用于填充React应用程序中的侧栏导航组件。每个Wordpress类别将作为此导航中的一个项目。将此组件视为目录

• 文章标题将是每个类别的子菜单项。因此，以食谱为例，如果菜单上的一个类别项目是“墨西哥食品”，那么帖子标题或子菜单项目可能是“墨西哥玉米卷”、“玉米饼”、“玉米粉蒸肉”

• 按照墨西哥食品示例，帖子内容将显示在主内容区域中，具体取决于您单击的子菜单项。因此，如果您要单击侧栏菜单组件中的“Tacos”，则主要内容将填充“Tacos”的配方。此主要内容区域是它自己的单个组件

问题： 主要的问题是，我能够使用React钩子、useffect和fetch在侧栏导航组件上获得要填充的项，而不会有太多问题。但是，单击子菜单项后，配方将不会填充到主内容区域

研究结果： 我能够确定useEffect并没有设置我的状态。我声明了两个变量，它们处理通过获取WP-API获得的JSON数据。然后，我想使用setPost函数将结果设置为我的组件状态。但是，此setPost函数不设置状态。下面，为了清晰起见，我将发布代码示例

代码： 这是我当前的主要内容组件，它接收道具。具体来说，它从React路由器接收“匹配”道具，其中包含特定WordPress帖子的URL段塞。我用这个

import React，{useState，useffect}来自“React”
功能主要内容（道具）{
控制台日志（道具）
useffect（（）=>{
fetchPost（）
}, [])
const[post，setPost]=useState（[]
const fetchPost=async（）=>{
console.log（'Fetched Main Content'）
const fetchedPost=等待提取(`http://coolfoodrecipes.xyz/wp-json/wp/v2/posts?slug=${props.match.params.wpslaug}`）
const postContent=await fetchedPost.json（）
console.log（后内容[0]）
setPost（后内容[0]）
控制台日志（post）
}
返回(
{/*  */}
)
}
导出默认主内容

以下是第一个控制台日志的结果，其中包含“我的比赛道具”的内容：

{
isExact: true,
params: {wpslug: "tacos"},
path: "/:wpslug",
url: "/tacos"
}

我的第三个控制台日志，

console.log（postContent[0]）

的结果将生成一个对象，在该对象中，它将正确返回该特定帖子的每一条详细信息

之后，我使用

setPost（postContent[0]）

将此信息保存到我的

post

状态

为了确认这一点，我运行了

console.log（post）

，它向其中返回一个简单的

[]

，一个空数组

结果和期望： 我所期望的是

setPost（postContent[0]）

中的内容将正确地保存在

post

状态，以便我可以使用该内容在页面上呈现内容

然而，实际的结果是，没有任何内容保存到该状态，每当我单击其他类别（如“Tamales”或“Enchiladas”）时，URL都会更新，但在第一次获取后，它不会再次获取信息

---

我知道这是一个冗长的问题，但任何能帮助这个可怜的新手的人都是绝对的救世主！提前谢谢

setPost

与组件类的正常

setState

一样也是异步的。 所以你应该使用

await setPost(postContent[0])
console.log(post)

---

为了获得函数内的结果

可能尝试改变const <代码> PASTHOMENET= JSONE（）/<代码>到const <代码> PASTHOMENET=等待FEXCHEDPOST。数据< /代码>

< P>首先让我们看一下您的第二个问题/期望：它在第一次取回之后从不获取信息。 useEffect函数可能有两个参数。回调函数和一组依赖项。仅当其一个依赖项发生更改时，才会调用effect函数。如果省略第二个参数，该函数将在每次重新渲染时运行。 你的数组是空的；这意味着该效果将在组件首次安装时运行，之后不会重新运行

要解决这个问题，您需要正确添加依赖项。 在您的情况下，如果props.match.params.wpslaug发生更改，则需要重新获取

useEffect(() => {
        fetchPost()
}, [props.match.params.wpslug])

---

现在来看看似乎没有正确设置状态的问题。 在您的示例中，设置/更新状态似乎没有什么问题。 问题是“post”变量适用于当前渲染周期，已设置为[]，并且在下一个周期之前不会更改（您应该并且已经将其标记为const，以便它无法更改其值）

我将尝试在这里解释2个循环

/* First run, should be the mounting of the component */
function MainContent(props) {
    const slug = props.match.params.wpslug;
    const [post, setPost] = useState([]) // 1. post is currently []

    useEffect(() => { // 3. the useEffect callback will be called, i.e. fetching posts
        fetchPost()
    }, [slug])

    const fetchPost = async () => {
        const fetchedPost = await fetch(`http://coolfoodrecipes.xyz/wp-json/wp/v2/posts?slug=${slug}`)
        const postContent = await fetchedPost.json()

        // 4. you change the state of this component, 
        // React will run the next render-cycle of this component
        setPost(postContent[0]) 
    }

    return (
        <div>
            <h1>{post.title}</h1> {/* 2. React will tell the browser to render this */}
        </div>
    )
}

/*第一次运行应该是安装组件*/
功能主要内容（道具）{
常量slug=props.match.params.wpslaug；
const[post，setPost]=useState（[]）//1。post当前为[]
useEffect（（）=>{//3。将调用useEffect回调，即获取帖子
fetchPost（）
}，[slug]）
const fetchPost=async（）=>{
const fetchedPost=等待提取(`http://coolfoodrecipes.xyz/wp-json/wp/v2/posts?slug=${slug}`）
const postContent=await fetchedPost.json（）
//4.更改此组件的状态，
//React将运行此组件的下一个渲染周期
邮政编码
/* Second run, initiated by setting the post state */
function MainContent(props) {
    const slug = props.match.params.wpslug;
    const [post, setPost] = useState([]) // 1. post is now [{title: 'TestPost'}]

    useEffect(() => { // on this cycle this useEffect callback will not run because 'slug' did not change
        fetchPost()
    }, [slug])

    const fetchPost = async () => {
        const fetchedPost = await fetch(`http://coolfoodrecipes.xyz/wp-json/wp/v2/posts?slug=${slug}`)
        const postContent = await fetchedPost.json()

        setPost(postContent[0]) 
    }

    return (
        <div>
            <h1>{post[0].title}</h1> {/* 2. React will tell the browser to render this */}
        </div>
    )
}