小编Dal*_*eri的帖子

我有一个使用样式组件的 Next.js 应用程序。首次加载任何页面时，都没有任何抱怨，并且所有内容看起来都具有正确的样式。然而，当我刷新页面时，一切看起来仍然正常，但我收到控制台错误：

Warning: Prop `className` did not match. Server: "sc-TXQaF bfnBGK" Client: "sc-bdnylx kKokSB"

我尝试简化特定组件上的样式，但错误仍然存​​在。我尝试从 DOM 中完全删除该组件，这会导致 DOM 中的下一个元素出现相同的错误。所以这似乎是一个全球性问题。

我已按照此处找到的使用 Next.js 和样式组件的指南进行操作： https: //github.com/vercel/next.js/tree/master/examples/with-styled-components

.babelrc我在根目录中有该文件：

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

_document.js我的页面目录中有该文件：

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const sheet = new ServerStyleSheet()
        const originalRenderPage = ctx.renderPage

        try {
            ctx.renderPage = () =>
                originalRenderPage({
                    enhanceApp: (App) => (props) …

所以我正在努力使用discord.py 库学习Python 并使用机器人。这些机器人需要 API 令牌，我想将服务器上的功能机器人与我正在开发的测试机器人分开。

我的环境将设置一个 master 分支和一个 dev 分支。我希望主分支的代码库能够与 一起使用Test Bot，并且开发分支的代码库能够与 一起使用Test Bot Dev。我的想法是将 API 令牌变量存储在未跟踪的文件中，并将该文件放置在服务器上。然后，我的 PC 上有一个本地文件，该文件具有相同的文件，但设置了不同的标记作为变量。

不过感觉有点老套。我只是想知道，对于您想要为代码库使用一个存储库，但需要为您的开发和生产环境使用不同的特定变量的情况，是否有更好的标准实践。这是一个令人费解的问题，因此我正在努力通过搜索来成功找到针对这种情况的建议。

我正在运行一个非常简单的函数。

module.exports.test = async () => {
    const browser = await puppeteer.launch(puppetOptions);
    try {
        const page = await browser.newPage();
        await page.goto('https://google.com');
        // helper function that pauses for five seconds before moving on
        await pause(5000);
        await browser.close();
        console.log('browser closed');
    } catch (err) {
        console.log(err);
        await browser.close();
    }
}

我从我的文件中运行它index.js：

const server = app.listen(process.env.PORT || 5000, () => {
    test();    
});

现在我在终端中运行它node index.js。它会打开一个浏览器。它会打开一个新页面并导航到 Google。它等待五秒钟。它关闭浏览器。一切看起来都很棒。我敲击ctrl + c终端来停止该过程，但没有任何反应。通常这是有效的。如果我删除该browser.close功能，ctrl + c则返回到按预期工作，并结束该过程。我正在运行的这个函数是我分解一个似乎存在内存泄漏的更复杂函数的结果，所以看起来这确实browser.close是罪魁祸首。但就我的一生而言，我无法弄清楚为什么在简化得如此之多时会引起问题。headless这在、 …

我正在尝试制作一个简单的聊天窗口，其中消息锚定在窗口的右侧和底部。我希望聊天窗口在消息溢出窗口时滚动。

我正在使用 flexbox 来定位消息，并给窗口一个overflow-y: auto;. 由于某种原因，我无法理解这不起作用。如果我从窗口中删除了 flex 定位，滚动会按预期正常工作。为什么 flexbox 会改变滚动行为？

这是一个显示问题的非常简单的代码笔：https ://codepen.io/skypod/pen/OdavbR

.chat-window {
  background-color: grey;
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  overflow-y: auto;
}

.message {
  background-color: blue;
  color: white;
  padding: 0.5rem;
  margin: 0.25rem;
}

<div class="chat-window">
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div …

我正在尝试使用 Google OAuth 身份验证设置 React/Redux - NodeJs Express 堆栈。我的问题是控制台中的 COR 错误。我发现了一些我认为正是我的问题的 Stack Overflow 问题，但解决方案没有产生任何结果。特别是这两个：CORS与谷歌的OAuth和CORS / CORB问题与之反应/节点/ Express和谷歌的OAuth。

因此，我尝试了各种修复方法，这些修复方法似乎都使我回到了相同的错误。这是其中最直接的：

const corsOptions = {
    origin: 'http://localhost:3000',
    optionsSuccessStatus: 200,
    credentials: true
}
app.use(cors(corsOptions));

这是在我的API.js文件的根目录中。我收到的控制台错误状态：

访问 XMLHttpRequest ' https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fapi%2Foauth%2Fgoogle%2Freturn&scope=profile&client_id=PRIVATE_CLIENT_ID。 .googleusercontent.com '（重定向自 ' http://localhost:5000/api/oauth/google '）来自原点 'null' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 '请求的资源上存在 Access-Control-Allow-Origin 标头。

因此，如果我在开发工具中查看我的网络日志，我会查看我对 API 路径的请求，并查看我希望看到的内容：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Origin: http://localhost:3000

所以在我看来，我的问题不在于我的前后沟通。这让我相信这可能是 Passport 令牌验证的问题。以下是我的简化路线：

router.post('/oauth/google', passport.authenticate('googleVerification', {
    scope: ['profile']
}), (req, res) => {
    console.log('Passport has verified …

因此，我在一个多页面项目上使用 video.js，该项目的页面每个页面上的视频数量不同。我想播放一个视频来暂停页面上播放的任何其他视频。我已经让它工作了，但我的代码只有在专门针对该页面制作时才有效，而不是单独处理每个页面。

HTML（示例）

<video id="video5" poster="poster.png" class="video-js vjs-16-9 vjs-big-play-centered"
  data-setup='{
    "controls": true,
    "autoplay": false,
    "preload": "none"
  }'>
  <source src="video.mp4" type='video/mp4'>
</video>

JS

var player1 = videojs('video1');
var player2 = videojs('video2');
var player3 = videojs('video3');
var player4 = videojs('video4');
var player5 = videojs('video5');
var player6 = videojs('video6');

var players = [player1, player2, player3, player4, player5, player6];

players.forEach(function(player) {
  player.on('play', function() {
    console.log('test');
    players.forEach(function(pl) {
      if (pl !== player) {
        pl.pause();
      }
    })
  })
});

因此，如果我有 6 个具有相同 id 的视频，则效果很好。但如果我有更多或更少，它就会破裂。有没有办法将 JS 格式化为按类而不是按 …