在 UseEffect 中设置状态后如何更新状态？答案

【问题标题】：How can I update state after setting it in UseEffect?在 UseEffect 中设置状态后如何更新状态？
【发布时间】：2021-08-14 06:14:44
【问题描述】：

我想在我的一个组件中显示产品列表。我需要使用 UseEffect 来获取返回承诺的函数的结果。然后我在 UseEffect 中设置状态，但无法显示产品。状态正在更新，但我无法在 dom 上呈现结果。

这是组件：

import React, { useEffect, useState } from "react"
import styled from "styled-components"
import pullShopifyData from "../../functions/shopify"

export default function DataPreview(props) 
    const { apiKey } = props

    const [data, setData] = useState([])

    useEffect(() => {
        pullShopifyData(apiKey).then(response => {
            console.log(response.data.shop.products)
            setData(response.data.shop.products)
        })
      }, [])
    
    return (
        <Wrapper>
            {data.length > 0 ? data.map(product => (
                <ProductWrapper>{product}</ProductWrapper>
            )): <NoProductsWrapper>No Products Found</NoProductsWrapper>}
        </Wrapper>
    )
}

const Wrapper = styled.div``

const ProductWrapper = styled.div``

const NoProductsWrapper = styled.div``

这是 dom 的输出：

【问题讨论】：

请记住 useEffect 在on every render 中起作用（除非您非常明确地告诉它不要通过告诉它要忽略哪些变量），这就是为什么 useEffect 通常用于副作用，例如不影响状态的事物。现在，你的 render() 运行，useEffect 开始运行，然后 setData() 运行，它运行 render 因为它是一个状态更新，所以你的 useEffect 开始运行，所以 setData 运行，这......你明白了。
你检查过控制台是否有数据吗？
哦，这是一种非常正常的数据加载方式。如果您想做得更好，请参阅@douscriptist 的回答。但是，如果您想以简单的方式进行操作，请查看：npmjs.com/package/react-fetch-hook
我有来自 console.log(response.data.shop.products) 行的所需数据。当我从名为“数据”的状态变量中记录数据时，我什么也得不到。
另外，我在 useEffect 中包含的 '[]' 参数不会导致函数只运行一次吗？

标签： javascript reactjs es6-promise use-effect

【解决方案1】：

将您的数据获取函数移至异步包装函数。然后在 useEffect 中调用它。

useEffect(() => {
    fetchSomething();
}, [])

const fetchSomething = async () => {
     const response = await pullShopifyData(apiKey);
     console.log(response.data.shop.products)
     setData(response.data.shop.products)
}

【讨论】：

除了语法糖（顺便说一句很好），这与 OP 的代码有什么不同？
一旦我遇到这样的事情，不知何故在 useEffect 中使用 then 对我不起作用。（可能是 useEffect 本身的异步混淆了一些 idk。）实际上似乎还可以，我不确定我的问题是否有所不同，但是当我像这样更改结构时，它基本上对我有用。
老实说，这与 OP 完全相同（但代码更好）