我正在与我的eslint一起解决一个小问题,它似乎在大多数情况下工作正常,但有些情况下它与React代码不起作用.
我们以此代码为例:
const cellPLay = (name, src) => (
<Table.Cell>
<Modal trigger={<Button icon><Icon name="video play" size="large" /></Button>}>
<Modal.Header>
{name}
</Modal.Header>
<Modal.Content image>
<Modal.Description>
<video src={src} controls style={{ width: 910 }} />
</Modal.Description>
</Modal.Content>
</Modal>
</Table.Cell>
);
Run Code Online (Sandbox Code Playgroud)
给出这样的错误:
/my-path/MyFile.js:18:7:预期缩进8个空格字符,但找到6. [Error/react/jsx-indent]
出于某种原因,eslint认为Modal.Content应该在Modal.Header之后缩进,但是即使我修复了所有缩进,它也要求它说某些结束标记的缩进是错误的:
预期结束标记以匹配开口缩进
我的eslint配置文件:
{
"extends": "./my-eslint/index.js"
}
Run Code Online (Sandbox Code Playgroud)
实际的eslint代码:
module.exports = {
extends: require.resolve('eslint-config-airbnb'),
env: {
browser: true,
jest: true,
es6: true,
},
parserOptions: {
ecmaVersion: 8,
sourceType: 'module',
ecmaFeatures: {
jsx: …Run Code Online (Sandbox Code Playgroud) 我正在尝试测试以下情况:
为此,我有2个提供者:
两者都有自定义的挂钩,公开了这些组件的共享逻辑,即:fetchResource / expireSesssion
当获取的资源返回401状态时,它将通过共享setState方法在身份验证提供程序中设置isExpiredSession值。
AuthenticationContext.js
从'react'导入React,{createContext,useState};
const AuthenticationContext = createContext([{}, () => {}]);
const initialState = {
userInfo: null,
errorMessage: null,
isExpiredSession: false,
};
const AuthenticationProvider = ({ authStateTest, children }) => {
const [authState, setAuthState] = useState(initialState);
return (
<AuthenticationContext.Provider value={[authStateTest || authState, setAuthState]}>
{ children }
</AuthenticationContext.Provider>);
};
export { AuthenticationContext, AuthenticationProvider, initialState };
Run Code Online (Sandbox Code Playgroud)
useAuthentication.js
import { AuthenticationContext, initialState } from './AuthenticationContext';
const useAuthentication = () => {
const [authState, …Run Code Online (Sandbox Code Playgroud) reactjs react-testing-library react-hooks react-hooks-testing-library
使用 Amplify 我在部署 React 应用程序时遇到困难,我认为这是由于构建设置造成的。尝试部署时提供的默认构建设置如下所示:

我知道这是不正确的,我在构建日志中发现的错误是:
2020-05-14T00:02:22.327Z [WARNING]: !! No index.html detected in deploy folder: /codebuild/output/src568504829/src/chatterfield/
Run Code Online (Sandbox Code Playgroud)
部署成功,除非我启动应用程序时收到 ERR_TOO_MANY_REDIRECTS。在我将baseDirectory构建设置更改为/client/public指向index.html. 该应用程序似乎启动时没有出现重定向错误,但没有加载任何内容。我猜这是因为我没有运行 npm run build 命令,或者没有加载预构建命令。任何帮助将不胜感激。谢谢 这是此应用程序链接到的存储库:
https ://github.com/travelerr/chatterfield
deployment amazon-web-services build-settings npm aws-amplify
我正在使用React-Chrome-Redux库开发React Chrome扩展程序
这是我第一次使用这个,我陷入了一个错误,我无法弄清楚原因.
我的弹出应用程序在运行时失败,并在控制台上显示以下错误消息:
(未知)事件处理程序出错:TypeError:无法读取未定义的属性"错误"
我尝试调试并在错误的确切位置设置断点:
return new Promise(function (resolve, reject) {
chrome.runtime.sendMessage({
type: _constants.DISPATCH_TYPE,
payload: data
}, function (_ref2) {
var error = _ref2.error;
var value = _ref2.value;
if (error) {
reject((0, _assignIn2.default)(new Error(), error));
} else {
resolve(value.payload);
}
});
});
}
Run Code Online (Sandbox Code Playgroud)
在Promise回调中,当动作为:type:"chromex.dispatch"时,_ref2未定义,并且有效负载也未定义.
这是在引入调度方法启动认证过程后开始发生的,代码如下:
class App extends Component {
constructor(props) {
super(props);
this.props.dispatch({
type: START_AUTH
});
}
Run Code Online (Sandbox Code Playgroud)
在popup/index.js和background/index.js上我设置了商店通信渠道:
//popup
import {Store} from 'react-chrome-redux';
import {Provider} from 'react-redux';
const proxyStore = new Store({
portName: 'my_app'
});
//background …Run Code Online (Sandbox Code Playgroud) javascript google-chrome-extension reactjs redux react-redux
我是 GraphQL/Apollo 的新手,我很难用 React 应用程序设置它。
我有一个 React 组件,它从使用 Amplify/AppSync 构建的 GraphQL API 加载列表。
如果我手动调用以获取项目,即:
const videosData = await client.query({
query: gql(queries.listVideos)
});
const videosItems = videosData.data.listVideos.items;
setVideosData(videosItems);
Run Code Online (Sandbox Code Playgroud)
奇迹般有效。但是,如果我尝试使用 Apollo Query 组件或 useQuery 挂钩,则会引发以下错误:
类型错误:this.currentObservable.query.getCurrentResult 不是函数
如果我只是添加行来使用钩子获取查询,它已经给了我这个错误
钩子调用:
const {loading, error, data, refetch} = useQuery(gql(queries.listVideos));
Run Code Online (Sandbox Code Playgroud)
引发问题的被调用函数:
QueryData.getQueryResult
node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:325
322 | called: true
323 | });
324 | } else {
> 325 | var currentResult = this.currentObservable.query.getCurrentResult();
| ^ 326 | var loading = currentResult.loading,
327 | partial = currentResult.partial,
328 …Run Code Online (Sandbox Code Playgroud) 我有一个使用 AWS Amplify 构建的 React Web 应用程序我已经添加了 Cognito 用户池的身份验证,我没有使用用户名,我只使用电子邮件/电话选择了登录,我不想要用户名,但 Cognito 还是创建了一个随机用户名.
我希望用户使用他们的电子邮件或使用一个社交提供商(Facebook 或 Google)登录,这无关紧要,他们应该可以根据电子邮件访问同一个帐户。
我认为很正常的做法。但是,当我第一次尝试使用社交提供商登录时,我注意到 Cognito 没有为我提供相同的帐户,而是创建了一个新帐户,使用不同的用户名,并在用户池中将 EXTERNAL_PROVIDER 作为帐户状态
所以,我认为这可能只是一些映射不正确,我去了联邦部分的属性映射,我看到 Facebook Id 和 Google Sub 被分配给用户名,我试图删除它,为了我的令人惊讶的是,它被分配回了用户名。然后我想“我可以创建一个自定义属性来存储该信息,它应该没问题”。
所以我这样做了,为 Facebook 创建了一个属性,为 GoogleId 创建了一个属性......再次尝试......不,仍然回到用户名,但没有错误消息,什么都没有......
我去寻求帮助文档并找到了这个
目前,只有 Facebook id、Google sub、login with Amazon user_id 和 Sign in with Apple sub 属性可以映射到 Amazon Cognito 用户池用户名属性。
如果这总是将每个提供者 ID 与用户名相关联,那么就无法合并这些帐户我认为可能是我需要设置一个联合身份池,但阅读它似乎是用来提供 IAM 角色/外部用户的权限,我不想。
我怎么能做到这一点?
federated-identity amazon-web-services amazon-cognito aws-amplify
我已经创建了一个计时器QML应用程序,我正在使用Timer qml组件.间隔设置为1000毫秒(默认值为1)......但只有当应用程序关注它时,它似乎才能正常工作.当我把它放在后台时,似乎每次都没有触发,因此我在应用程序中遇到了一些错误.
我试图在文档中找到与此相关的任何内容,但我不能定时器代码非常简单:
Timer {
id: timer
repeat: true
onTriggered: {msRemaining -= 1000; Core.secondsToText(type);}
}
Run Code Online (Sandbox Code Playgroud)
任何人对此有任何想法以及如何解决它?
版本:Qt 5.2 QML 2.0 OS X 10.9
我正在尝试设置一个 AWS Cognito 后端,我有一个 React 前端已经在使用它,现在我需要我的 DRF API 来使用 Cognito 作为后端进行身份验证。
我为此找到了一些 Python 包,它们似乎都没有得到积极维护 django- warrant 不适用于 Django3 并且几乎已经死了
Django Cognito JWT似乎是我最好的选择,但也没有积极维护,文档很差,并且有一篇关于如何使用的中等帖子,不是很详细,但总比没有好。
所以,我试着按照文档
在我的设置中添加了环境变量
COGNITO_AWS_REGION = 'us-east-1'
COGNITO_USER_POOL = 'us-east-1_xxxxxxx' # same user pool id I'm using on the React app
COGNITO_AUDIENCE = 'XXXXXXXXXXXXXXXXXXXXXX' # the same client id I'm using on the React app
Run Code Online (Sandbox Code Playgroud)
然后在我的 DRF 身份验证类上:
'DEFAULT_AUTHENTICATION_CLASSES': [
'django_cognito_jwt.JSONWebTokenAuthentication',
'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
'rest_framework.authentication.BasicAuthentication',
'rest_framework.authentication.SessionAuthentication',
],
Run Code Online (Sandbox Code Playgroud)
最后是用户模型:
AUTH_USER_MODEL = 'accounts.MyUser'
COGNITO_USER_MODEL = "accounts.MyUser"
Run Code Online (Sandbox Code Playgroud)
我的自定义用户模型:
class MyUser(AbstractUser):
"""User model.""" …Run Code Online (Sandbox Code Playgroud) 我在 VPC 内的 lambda 上运行无服务器 Web 应用程序,并连接到 Aurora-MySQL RDS 实例,并使用入站规则允许来自 lambda 安全组的流量 连接工作正常,但是 lambda 经常冷开始给了我一个暂停。经过一番研究,我发现在 VPC 上运行 lambda 会带来额外的启动成本,并且我在不止 1 个地方看到了避免在 VPC 上使用 lambda 的建议,除非您严格需要访问 VPC 中的某些资源。
因此,我决定将 RDS 移至可公开访问的实例,以便我的 lambda 可以通过互联网访问它并从 VPC 中删除 lambda。
因此,我将 RDSPublic accessibility选项更改为Yes并编辑安全组以允许来自任何 IP 的入站连接。我还从 lambda 中删除了 VPC,因此 lambda 不再在 VPC 上运行,我认为这已经足够了。
但后来我的 lambda 开始无法连接到我尝试使用本地客户端连接的数据库,再次失败
尝试 ping 主机名,请求超时
经过深入研究后,我发现我的数据库实例子网组具有一些私有子网可能是一个问题(?)因此,我创建了一个仅包含公有子网的新子网组,并尝试将我的数据库实例移动到新的子网组子网组...但收到此消息:
You cannot move DB instance my-instance to subnet group my-new-group. The specified DB subnet group and DB instance are in the same …Run Code Online (Sandbox Code Playgroud) 我正在开发一个使用 create-react-app 创建的应用程序
但后来我需要使用mediainfojs库,这个库需要 wasm 文件,根据我的理解,我无法使用 create-react-app 添加它,我不得不弹出它。
弹出后,我去mediainfo了解如何在webpack上添加wasm
他们使用CopyPlugin,但当我尝试这样做时,它抱怨我的 webpack (4) 和 CopyPlugin 的版本......所以,我决定迁移到 webpack 5
那就是痛苦开始的时候......在遵循他们的迁移教程并对我的进行大量修改后webpack.config,我在运行时遇到以下错误yarn build:
找不到模块:错误:您尝试导入位于项目 src/ 目录之外的 /MyWorkspace/project/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator。不支持 src/ 之外的相对导入。
唯一调用它的地方babel-preset-react-app是在配置中
这里:
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve("babel-loader"),
options: {
customize: require.resolve(
"babel-preset-react-app/webpack-overrides"
),
Run Code Online (Sandbox Code Playgroud)
和这里:
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve("babel-loader"),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve("babel-preset-react-app/dependencies"),
{ helpers: true },
],
],
cacheDirectory: …Run Code Online (Sandbox Code Playgroud) 我正在尝试将应用程序部署到Mac OSX,但它不起作用.
在构建我的应用程序后,它似乎工作正常,在Qt Creator中运行,我使用QML和C++来构建应用程序.我用过命令行:
macdeployqt MyApp.app -dmg
Run Code Online (Sandbox Code Playgroud)
之后.dmg生成一个文件,但里面的应用程序不起作用.它打开一个空窗口.更糟糕的是,在部署应用程序执行后,我在Qt Creator中的应用程序也开始只显示一个显示以下输出的空窗口:
qrc:/qml/main.qml:1:1:未安装模块"QtQuick"
qrc:/qml/main.qml:4:1:未安装模块"QtQuick.Controls"
qrc:/qml/main.qml :2:1:模块"QtQuick.Dialogs"未安装
qrc:/qml/main.qml:1:1:未安装模块"QtQuick"
qrc:/qml/main.qml:4:1:模块"QtQuick .Controls"未安装
qrc:/qml/main.qml:2:1:模块"QtQuick.Dialogs"未安装
qrc:/qml/main.qml:1:1:模块"QtQuick"未安装
qrc: /qml/main.qml:4:1:未安装模块"QtQuick.Controls"
qrc:/qml/main.qml:2:1:未安装模块"QtQuick.Dialogs"
otool -L 告诉我这个:
@executable_path /../ Frameworks/QtQuick.framework/Versions/5/QtQuick(兼容版本5.2.0,当前版本5.2.0)
@executable_path /../ Frameworks/QtQml.framework/Versions/5/QtQml(兼容版本) 5.2.0,当前版本5.2.0)
@executable_path /../ Frameworks/QtNetwork.framework/Versions/5/QtNetwork(兼容版本5.2.0,当前版本5.2.0)
@executable_path /../ Frameworks/QtCore. framework/Versions/5/QtCore(兼容版本5.2.0,当前版本5.2.0)
@executable_path /../ Frameworks/QtGui.framework/Versions/5/QtGui(兼容版本5.2.0,当前版本5.2.0)
/System/Library/Frameworks/OpenGL.framework/Versions/A/OpenGL(兼容版本1.0.0,当前版本1.0.0)
/System/Library/Frameworks/AGL.framework/Versions/A/AGL(兼容版本1.0. 0,当前版本1.0.0)/usr/lib/libstdc++.6.dylib(兼容版本7.0.0,当前版本60.0.0)
/usr/lib/libSystem.B.dylib(兼容版本1.0.0,当前版本1197年1月1日)
我删除了我在系统中的所有旧Qt库(或者我想,现在在其他任何地方都找不到Qt,只有5.2安装).任何人都知道发生了什么?
我有一个 React-Redux 应用程序,可以从视频中读取一些元数据。
然而,添加到loadmetadata事件中的代码永远不会被触发。
作为一种解决方法,我在之前添加了一个等待 1 秒的计时器,这是一个非常糟糕的解决方案,并且并非每次都有效。
另一件事是,我找不到一种优雅的方式将视频元素集成到 Redux 代码中,而无需操作 DOM。
代码如下所示:
videoPlayerElement = document.getElementById(`videoplayer-${videoId}`);
videoPlayerElement.addEventListener('loadedmetadata', function(e) {
const duration = videoPlayerElement.duration;
...
})
Run Code Online (Sandbox Code Playgroud)
侦听器内的代码永远不会执行。我还尝试了不同的方法来分配 loadmetadata 事件,即:直接分配给videoPlayerElement.onloadmetadata仍然不起作用。
我认为这可能是因为对象的范围,所以我将其更改为全局只是为了测试......没有帮助。
关于可能导致什么的任何其他想法?
如果我运行一个简单的例子,就像这个一样,它工作正常。
阅读David Bacon的垃圾收集统一理论 我发现他提到现代GC是追踪和参考计数的混合物:
鉴于我们在跟踪和引用计数之间发现的结构相似性,我们开始重新检查各种收集器体系结构,以了解这些样式的集合之间的相互作用.我们观察到所有真实的垃圾收集器实际上是跟踪和引用计数的某种形式的混合.这就解释了为什么优化的"跟踪收集器"和优化的"引用计数收集器"变得越来越相似:因为它们实际上具有彼此的特性.
他提到的一件事是使用ZCT(零计数表)来跟踪从堆栈引用的对象.关于ARC的另一件事是:
我的问题:现代C++(11/14/17)与这些陈述相比如何?这是真的,C++的ARC是混合的,也使用跟踪GC的一些元素?我在网上找不到任何指向我的内容,但该文件非常明确地指出:
我们观察到所有真实的垃圾收集器实际上是跟踪和引用计数的某种形式的混合.
这是关于现代C++的吗?或者它不认为C++ ARC是一个"真实的垃圾收集器"?有些人可能认为C++没有GC,C++没有跟踪GC,但ARC是一种GC方法,正如它在论文中所述:
跟踪和引用计数统一被视为具有非常独特的性能属性的垃圾收集的根本不同的方法.我们已经实现了两种类型的高性能收集器,并且在此过程中观察到我们对它们的优化越多,它们表现得越相似 - 它们似乎共享一些深层结构.
引用计数是一种垃圾收集形式,每个对象都有一个对它的引用数量的计数.通过引用计数为零来识别垃圾.对象的引用计数在创建对它的引用时递增,在引用被销毁时递减.当计数达到零时,将回收对象的内存.
此外,还有针对GC分配/释放的现代C++ ARC的任何基准(注意:我不是要求进行一般比较,而是要求内存管理).
最后但并非最不重要的,如果我正在开发一个单线程应用程序,那么在C++上使用递增/递减作为原子操作的优势是什么?无论如何要禁用它?
reactjs ×6
aws-amplify ×3
javascript ×3
qml ×2
qt ×2
amazon-rds ×1
amazon-vpc ×1
aws-appsync ×1
aws-lambda ×1
babel-loader ×1
c++ ×1
c++14 ×1
deployment ×1
django ×1
dom-events ×1
eslint ×1
graphql ×1
html5-video ×1
jwt ×1
macos ×1
npm ×1
python ×1
qt-quick ×1
qt5 ×1
qtquick2 ×1
react-apollo ×1
react-hooks ×1
react-hooks-testing-library ×1
react-redux ×1
redux ×1
subnet ×1
timer ×1
webpack ×1