useState 使用相同的代码显示本地/生产之间的不同行为答案

【问题标题】：useState shows different behaviours between local/production with same codeuseState 使用相同的代码显示本地/生产之间的不同行为
【发布时间】：2022-01-12 01:21:56
【问题描述】：

我在 React 中有以下功能：

async function getImages() {
        try {
            const res = await axios.get(process.env.REACT_APP_SERVER + '/gallery')
            if (res.status !== 304) await setImagesDATA(res.data) // imagesDATA is const[imagesDATA, setImagesDATA] = useState([])
        } catch (error) {
            console.log(error)
            alert(error)
        }
    }

从我的快递服务器检索以下响应：

router.get('/', function(req, res, next) {
    ftp.list(FTPPath, (error, list) => {
        if (error) {
            throw error
        } else {
            const files = list.map((item,i) => {
                return(
                    {
                        id: i,
                        name: item.name,
                        path: FTPHost + item.name,
                        size: item.size
                    }
                )
            })
            res.send(files)
        }
        ftp.end()
    })
    ftp.connect(FTPConfig)
});

使用以下方式触发：

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

它在生产和本地都有效。但我知道我的代码中存在问题，因为：当我尝试使用useEffect(() => {getImages()})，而[]末尾没有空依赖数组时，代码在本地服务器上运行良好，但完全相同的代码在生产中在线崩溃，因为getImages()即使状态码为304也会触发重新渲染并且没有发生状态更改导致useEffect() 在无限循环中再次运行。我不明白为什么getImages() 即使没有任何变化也会触发重新渲染，更让我困惑的是为什么这不会发生在完全相同的本地环境中？单独的承诺会触发重新渲染吗？我应该如何正确实施？

【问题讨论】：

标签： node.js reactjs express react-hooks use-effect

【解决方案1】：

您没有说明是否将环境变量 REACT_APP_SERVER 添加到托管代码的任何位置。

一些托管服务器，例如 Netlify，您应该在推送代码之前添加环境变量。

【讨论】：

嗨，正如我所提到的，代码已经运行良好，所以 env 变量不是问题！我的问题在问题底部描述
您不提供任何其他详细信息，除了它在本地工作而不在服务器上工作。否则，当您甚至没有总结错误消息时，除了您可能忘记或错误地添加了您的环境变量之外，还应该破译您的问题。
我指定了当我省略 useEffect 上的空依赖数组（使用异步函数）或导致无限循环（使用正常承诺）时代码崩溃，所以我的问题是 useEffect 在生产服务器上的行为不同。顺便说一句，我正在 Heroku 上部署