我一直在使用 create-react-app 和我添加的其他一些库开发一个小应用程序。鉴于计划的架构和一些我想用 react-router 运行的测试,我希望能够使用 url 中的域 mame 在本地运行我的应用程序,这样而不是
本地主机:3000/
这将是
somedomain.com
我已经尝试了一些事情,比如弹出 ceate-react-app 但我不知道如何修改 webpack 配置来改变公共路径,或者如何在我的机器上设置某种代理,这样 somedomain.com 就相当于输入本地主机:3000
我不确定正确的方法是什么,我似乎还找不到任何可靠的信息。
我刚刚开始在我的应用程序上使用 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) 基本上,我为客户端制作了一个(相对)简单的应用程序。该应用程序正常工作,但他们一直在要求更改数据。
鉴于该应用程序最初的预期简单性以及它保存静态数据的事实,我没有将其链接到任何后端。该数据将保存在本地静态文件中,而对象将保存该数据。
问题是,fle被捆绑到了buld中,因此,如果我只想更改一些静态数据而不必进行rbuild,我不会!
我的数据文件可以在公用文件夹中访问,并且可以正常工作。我试图通过js文件实现相同的想法。
我无法从/ src文件夹外部导入。
有什么方法可以从以某种方式添加到构建的静态文件夹访问静态数据?
我有一个用 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) 我的困境始于将我的 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) 我有一个使用最终表单数组的表单。表单有效且验证有效,但是,当我在组件内进行状态更改时,它会重置我的所有值。
我能够使用react-final-form-arrays提供的相同示例复制该问题:
https://codesandbox.io/embed/react-final-form-field-arrays-om6p6
我添加了一个按钮来切换状态更改。本质上,只需尝试在表单中填充值,然后更改状态即可。表格将重置,我不明白为什么会出现这种情况。如果我删除初始值,这种情况就不会发生。
有谁知道为什么会这样?
我有一个小的反应应用程序。在我的主要组件之一中,我在 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 没有正确匹配这些函数。
我尝试了一些替代方法来添加仅带有函数调用或没有箭头函数的事件侦听器,但它似乎并没有像那样工作,所以我不确定我的语法或设置可能有什么问题,即事件被正确添加,但不能删除它
reactjs ×4
forms ×2
javascript ×2
node.js ×2
amazon-s3 ×1
aws-sdk-js ×1
graphql ×1
import ×1
lifecycle ×1
proxy ×1
static ×1
validation ×1
yup ×1