小编xun*_*nux的帖子

如何在带有 create-react-app 的 url 中使用域名而不是“localhost:3000”进行本地开发?

我一直在使用 create-react-app 和我添加的其他一些库开发一个小应用程序。鉴于计划的架构和一些我想用 react-router 运行的测试,我希望能够使用 url 中的域 mame 在本地运行我的应用程序,这样而不是

本地主机:3000/

这将是

somedomain.com

我已经尝试了一些事情,比如弹出 ceate-react-app 但我不知道如何修改 webpack 配置来改变公共路径,或者如何在我的机器上设置某种代理,这样 somedomain.com 就相当于输入本地主机:3000

我不确定正确的方法是什么,我似乎还找不到任何可靠的信息。

proxy reactjs webpack-dev-server create-react-app

10
推荐指数
4
解决办法
1万
查看次数

AWS Javascript SDK v3 中的 S3 getSignedUrl v2 等效项

我刚刚开始在我的应用程序上使用 aws-sdk 将文件上传到 S3,我正在争论是否使用 aws-sdk v2 还是 v3。

V2 是整个包,考虑到我只需要 s3 服务,而不是无数其他选项,它非常臃肿。然而,文档非常神秘,我很难让等效的 getSignedUrl 函数在 v3 中工作。

在 v2 中,我有这个代码来签署 url,它工作正常。我在服务器上使用express

import aws from 'aws-sdk';

const signS3URL = (req,res,next) => {
    const s3 = new aws.S3({region:'us-east-2'});
    const {fileName,fileType} = req.query;
    const s3Params = {
        Bucket : process.env.S3_BUCKET,
        Key : fileName,
        ContentType:fileType,
        Expires: 60,
    };

    s3.getSignedUrl('putObject',s3Params,(err,data)=>{
        if(err){
            next(err);
        }
        res.json(data);
    });
}
Run Code Online (Sandbox Code Playgroud)

现在我一直在阅读文档和示例,试图让 v3 等效工作,但我找不到任何如何使用它的工作示例。到目前为止我的设置方式如下

import {S3Client,PutObjectCommand} from '@aws-sdk/client-s3';
import {getSignedUrl} from '@aws-sdk/s3-request-presigner';

export const signS3URL = async(req,res,next) => {
    console.log('Sign')
    const …
Run Code Online (Sandbox Code Playgroud)

amazon-s3 amazon-web-services node.js aws-sdk-js

9
推荐指数
1
解决办法
2万
查看次数

是否可以通过public文件夹中的create-react-app服务静态文件?

基本上,我为客户端制作了一个(相对)简单的应用程序。该应用程序正常工作,但他们一直在要求更改数据。

鉴于该应用程序最初的预期简单性以及它保存静态数据的事实,我没有将其链接到任何后端。该数据将保存在本地静态文件中,而对象将保存该数据。

问题是,fle被捆绑到了buld中,因此,如果我只想更改一些静态数据而不必进行rbuild,我不会!

我的数据文件可以在公用文件夹中访问,并且可以正常工作。我试图通过js文件实现相同的想法。

我无法从/ src文件夹外部导入。

有什么方法可以从以某种方式添加到构建的静态文件夹访问静态数据?

javascript import static reactjs

7
推荐指数
2
解决办法
1万
查看次数

使用 yup 和自定义验证验证 react-final-form 表单

我有一个用 react-final-form 创建的表单和一个如下所示的验证函数

export const validate = async (values, schema) => {
  if (typeof schema === 'function')
    schema = schema();

  try {
    await schema.validate(values, { abortEarly: false });
  } catch (e) {
    return e.inner.reduce((errors, error) => {
      return setIn(errors, error.path, error.message);
    }, {});
  }
};
Run Code Online (Sandbox Code Playgroud)

所以当我呈现我的表单时,它看起来像这样

<Form
  onSubmit={handleSubmit}
  validate={values => validate(values,schema())}
/>
Run Code Online (Sandbox Code Playgroud)

Schema 是一个 Yup 模式,定义如下

const schema = () =>

    yup.object().shape({
        name: yup
            .string()
            .max(255)
            .required(REQUIRED_FIELD),
        number: yup
            .string()
            .required(REQUIRED_FIELD),
        exp_year: yup
            .number()
            .required(REQUIRED_FIELD),
        exp_month: yup
            .number()
            .min(1,'Invalid')
            .max(12,'Invalid') …
Run Code Online (Sandbox Code Playgroud)

forms validation yup react-final-form

6
推荐指数
1
解决办法
7341
查看次数

使用 ApolloServer 从 graphql-import 迁移到仅 graphql-tools 时遇到问题,指令停止工作

我的困境始于将我的 graphql 模式从单个 .graphql 文件扩展到多个文件的简单愿望,这样我就可以更好地组织模式,这样它就不会变成一个失控的大文件。

我的原始布局非常简单,我在schema.graphql文件中有一个工作模式。我将能够使用importSchema('server/schema.graphql')graphql-import 库将其解析为字符串,该库现已弃用https://github.com/ardatan/graphql-import

他们提到它已合并到graphql-tools最新版本中,并在此处提供迁移教程https://www.graphql-tools.com/docs/migration-from-import该教程似乎非常简单,因为他们的第一个示例几乎说明了正是我的代码的样子(除了我不使用 es6 导入但旧的 fashoined 需要):

import { importSchema } from 'graphql-import';
import { makeExecutableSchema } from 'graphql-tools';

const typeDefs = importSchema(join(__dirname, 'schema.graphql'));
const resolvers = {
  Query: {...}
};
const schema = makeExecutableSchema({ typeDefs, resolvers });
Run Code Online (Sandbox Code Playgroud)

然后他们说要修改它,只需进行这些更改

import { loadSchemaSync } from '@graphql-tools/load';
import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
import { addResolversToSchema } from '@graphql-tools/schema';

const schema = loadSchemaSync(join(__dirname, 'schema.graphql'), { loaders: [new GraphQLFileLoader()] …
Run Code Online (Sandbox Code Playgroud)

node.js graphql apollo-server graphql-tools graphql-schema

5
推荐指数
1
解决办法
1227
查看次数

为 Final-form-arrays 中的数组提供初始值会导致状态更改重置整个表单,我该如何防止这种情况?

我有一个使用最终表单数组的表单。表单有效且验证有效,但是,当我在组件内进行状态更改时,它会重置我的所有值。

我能够使用react-final-form-arrays提供的相同示例复制该问题:

https://codesandbox.io/embed/react-final-form-field-arrays-om6p6

我添加了一个按钮来切换状态更改。本质上,只需尝试在表单中填充值,然后更改状态即可。表格将重置,我不明白为什么会出现这种情况。如果我删除初始值,这种情况就不会发生。

有谁知道为什么会这样?

forms reactjs react-final-form react-final-form-arrays

4
推荐指数
1
解决办法
4367
查看次数

Reactjs,删除 componentWillUnmount 上的事件侦听器,

我有一个小的反应应用程序。在我的主要组件之一中,我在 componentDidMount 上添加了一个事件侦听器,但是当我尝试在 componentWillUnmount 上删除它时,它似乎没有这样做。我什至尝试将它们一个接一个放置,但它似乎仍然没有被删除。

这是我的情况的示例代码(从真实情况减少)

listenerF(e){
  console.log('im scrolling!'
  //..actually does other stuff
}

componentDidMount(){
    window.addEventListener('scroll', e => this.listenerF(e))
}

componentWillUnmount(){
    window.removeEventListener('scroll',e=>this.listenerF(e))
    console.log('unmounted')
}
Run Code Online (Sandbox Code Playgroud)

我怀疑它可能是充当匿名函数的箭头函数,因此 removeEventListener 没有正确匹配这些函数。

我尝试了一些替代方法来添加仅带有函数调用或没有箭头函数的事件侦听器,但它似乎并没有像那样工作,所以我不确定我的语法或设置可能有什么问题,即事件被正确添加,但不能删除它

javascript lifecycle event-listener reactjs

2
推荐指数
1
解决办法
3637
查看次数