小编Yve*_*can的帖子

我最近开始在我的 React 应用程序中构建自定义钩子，并一直在关注 React 网站上的文档。但是，我正在构建的钩子不需要返回值，因为它们在初始化时为 Redux 设置数据。

例子：

// custom hook
export const useSetup() {
  useEffect(() => {
    if (data) fetch().then(data => dispatch(setInit(data)))
  }, [dispatch])
}


// functional component
export function Details() {
  useSetup()

我找不到明确说明钩子需要返回任何内容的文档。但是，我找不到钩子不返回内容的示例。有人可以建议这种方法是否正确吗？

我正在考虑使用 ES6 Map对象为我做散列，而不是创建自定义散列函数。然而，在我看来，它对不变性的支持并不多，这对于 React 和 Redux 来说都是一个关键的事情。

我习惯于不使用任何库来实现不变性，而只使用简单的解构：

const newObj = { ...prevObj, newKey: "value" }

或使用数组映射/过滤。

但是，ES6Map具有直接更新对象本身的方法。

我能想到的是做这样的事情：

var myMap = new Map()
Var myNewMap = { ...myMap.set() }
this.setState({ myMap:myNewMap })

但我不确定这是否有效。

我想我找到了另一种使用useContext钩子测试组件的方法。我看过一些教程，这些教程测试一个值是否可以从父上下文提供者成功传递给子组件，但没有找到关于更新上下文值的子组件的教程。

我的解决方案是将根父组件与提供程序一起呈现，因为状态最终在根父组件中更改，然后传递给提供程序，然后提供程序将其传递给所有子组件。对？

测试似乎在应该通过的时候通过，在不应该通过的时候不通过。有人可以解释为什么这是或不是测试useContext钩子的好方法吗？

根父组件：

...
const App = () => {
  const [state, setState] = useState("Some Text")

  const changeText = () => {
    setState("Some Other Text")
  }
...

  <h1> Basic Hook useContext</h1>
     <Context.Provider value={{changeTextProp: changeText,
                               stateProp: state
                                 }} >
        <TestHookContext />
     </Context.Provider>
)}

上下文对象：

import React from 'react';

const Context = React.createContext()

export default Context

子组件：

import React, { useContext } from 'react';

import Context from '../store/context';

const TestHookContext = () => {
  const context = …

大家好，我在桌面上打开我的网站时遇到问题。在我创建应用程序并执行所有代码的笔记本电脑上，我的 React 应用程序工作正常并更新，但是在其他计算机上，只有我的组件/元素加载，而我的 axios 请求正在返回（404 连接拒绝错误）。有什么提示或修复吗？PS 这是我第一次尝试将应用程序构建部署到网络服务器（digitalocean/NGINX）。

NGINX 配置文件

    server {
        listen 80 default_server;
        listen [::]:80 default_server;
        root /var/www/epenn92reactapp.space/html/among-us-reactapp3/client/buil>
        index index.html index.htm index.nginx-debian.html;

        server_name epenn92reactapp.space www.epenn92reactapp.space;

        error_page 405 =200 $uri;
        error_page 404 /index.html;

        location ^~ /assets/ {
                gzip_static on;
                expires 12h;
                add_header Cache-Control public;
  }

        location /v1/api {
                proxy_http_version 1.1;
                proxy_cache_bypass $http_upgrade;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_pass http://64.227.5.159:8080;
                try_files $uri /index.html;
}

    listen [::]:443 ssl ipv6only=on; …

当我更新父组件的状态时，其中用路由器包装的子组件也会重新渲染，这会将子组件的状态重新启动为其初始值。即使我没有将任何道具传递给孩子并且没有任何依赖性。

我怎样才能防止这种情况发生？您可以在此处找到演示。只需切换子组件的状态，然后更改父组件的状态，您就会看到发生了什么。

我已经在 Amazon Cognito 中为我的 Web 应用程序设置了一个用户池。该应用程序不是公开的，只允许特定用户登录。亚马逊控制台中该用户池的策略只允许管理员创建新用户。

我已经通过 Facebook 和 Google 实现了登录。Cognito 确实允许用户使用这些联合身份提供者登录应用程序，这很棒。但是，似乎任何拥有 Facebook 或 Google 帐户的人现在都可以自行注册。

因此，一方面，人们无法使用常规 Cognito 凭据创建自己的用户，但另一方面，如果他们使用联合身份提供者，则可以在 Cognito 中创建新用户。

有没有办法限制使用 Facebook 或 Google 登录我的应用程序，仅限用户池中已存在的用户？这样，管理员仍然可以控制谁可以访问应用程序。我想使用联合身份提供商共享的电子邮件来检查他们是否被允许登录。

该应用程序是使用 CloudFront 设置的。我编写了一个 Lambda，它拦截源请求以检查 cookie 中的令牌并根据访问令牌的有效性授权访问。

我想避免编写额外的代码来阻止用户注册 Facebook 或 Google，但如果没有其他方法，我将更新 Lambda。

我正在开发一个 JavaScript 库 ( https://github.com/yvesgurcan/web-midi-player ) 以在 Web 应用程序中启用 MIDI 播放。该库依赖于 Web Audio API 来创建一种播放这些 MIDI 文件的方法 ( https://github.com/yvesgurcan/web-midi-player/blob/test/src/MidiPlayer.js#L50 )。但是，我无法使用 Jest ( https://github.com/yvesgurcan/web-midi-player/blob/test/tests/midiPlayer.js )创建有意义的单元测试，因为这些测试无法访问该window对象更特别的是window.AudioContext。因此，运行我依赖的应用程序代码会AudioContext抛出与此对象不存在相关的错误，并且我实际上无法在库中测试很多东西。

我已经尝试了以下软件包来解决我的问题：jsdom, jsdom-global, 以及web-audio-test-api但这些似乎都没有注入AudioContext环境。

我认为这里的解决方案是存根/模拟，AudioContext但这听起来不像是可靠的单元测试的好解决方案。

你们建议如何测试 Web Audio API？存根是这里唯一可行的解​​决方案吗？

我正在使用create-react-app版本 4 和cra-template-pwa.

从serviceWorkerRegistration.js的源代码来看，由于该检查，服务工作线程似乎仅在生产中注册：

export function register(config) {
    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
        // Logic to register the service worker can be found here.
    }

我也想在开发模式下注册服务工作者。我取出了process.env.NODE_ENV === 'production'支票和另一张isLocalhost支票。

开发版本尝试www.example.com/service-worker.js按照我希望的方式加载服务工作者。问题是服务工作线程文件未编译到该public文件夹​​中，因此www.example.com/service-worker.js返回一个404.

手动将文件复制到public文件夹也不起作用：

未捕获的语法错误：无法在模块外部使用 import 语句

有没有办法让 Service Worker 在开发模式下工作？

我\xe2\x80\x99 在寻找 Elm 19 应用程序样式的最佳方法时遇到了问题。这是我\xe2\x80\x99一直在尝试但无济于事的方法：

module Main exposing (..)\n\nimport Browser\nimport Html exposing (..)\nimport Html.Attributes exposing (..)\nimport Html.Styled.Attributes exposing (css)\nimport List exposing (..)\nimport Css exposing (..)\n\ntype alias Model = List Status\ntype alias Status = { status : String }\n\n\nmain =\n    Browser.element\n        { init = init\n        , view = view\n        , update = update\n        , subscriptions = subscriptions\n        }\n\n\n-- Note: I removed the init, update, and subscriptions functions from this code snippet as it does not seem like they were relevant …