小编Kir*_*oss的帖子

为什么 vue-router 给我这个错误？需要明确的是，登录流程按预期工作，但我想 a) 摆脱 errro 和 b) 了解错误发生的原因。

错误：

Uncaught (in promise) Error: Redirected from "/login" to "/" via a navigation guard.

登录流程

1. 开始注销，但输入一个需要身份验证的 URL（即除了“/login”之外的任何内容）
2. 被重定向到“/login”（如预期的那样）。
3. 登录
4. 成功重定向到从步骤 #1 开始的 Url，除了上述错误。

登录操作：

doLogin({ commit }, loginData) {
  commit("loginStart");
  axiosClient
    .post("/jwt-auth/v1/token", {
      username: loginData.username,
      password: loginData.password,
    })
    .then((response) => {
      commit("loginStop", null);
      commit("setUserData", response.data);
      this.categories = airtableQuery.getTable("Categories");
      commit("setCategories", this.categories);
      this.locations = airtableQuery.getTable("Locations");
      commit("setLocations", this.locations);
      router.push("/"); // push to site root after authentication
    })
    .catch((error) => {
      console.log(error.response.data.message);
      commit("loginStop", error.response.data.message);
      commit("delUserData"); …

我是React的新手,试图掌握语法.

我正在React 15环境中开发(使用react-starterify模板),并且一直在使用下面的VERSION 2中的语法,但是,我在Facebook的React页面中找到的大多数示例和教程都是VERSION 1.有什么区别这两个什么时候我应该使用另一个？

版本1

var MyComponent = React.createClass({
  render: function() {
    return (
      <ul>
        // some list
      </ul>
    );
  }
});

module.exports = MyOtherComponent;

版本2

const MyComponent = () => (
  <ul>
    // some list
  </ul>
);

export default MyComponent;

有没有办法配置 ESLint w/ Prettier 以强制执行 max-len / printWidth 规则但不要求它？也就是说，允许您根据需要添加换行符？

// eslintrc.js

"max-len": [0, 160, 2, { ignoreUrls: true }],

// prettier.config.js

module.exports = {
  trailingComma: "all",
  tabWidth: 2,
  semi: true,
  singleQuote: false,
  printWidth: 160,
};

我正在构建一个应用程序(ES6),我很好奇什么是正确的方法来捕捉向上/向下滚动事件？

我试过(npm)安装react-scroll-listener但我无法使用我的ES6类.

我基本上想要:如果向上滚动,请执行此操作; 如果向下滚动,请执行其他操作.

import React from 'react';
import config from '../config';
import StaticImageList from '../Common/StaticImageList';
import ScrollListener from 'react-scroll-listener';

class Album extends React.Component {
    constructor(props){
      super(props);

    }
    myScrollStartHandler(){
        console.log('Scroll start');

    }
    myScrollEndHandler(){
        console.log('Scroll end 300ms(default)');
    }
    componentDidMount(){
      scrollListener.addScrollHandler('body', myScrollStartHandler, myScrollEndHandler );
    }
    render(){
      return <StaticImageList />;
    }
};

export default Album; 

我正在尝试使用签名 URL 从前端通过 fetch 上传到 GCP，但遇到了持续存在的 CORS 问题。

要上传的文件是否应该嵌入到signedurl中，或者发送到请求正文中的signedurl？

这是错误：

Access to fetch at <signedurl> from origin 'http://my.domain.com:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是存储桶上的 CORS 配置：

[
    {
      "origin": ["http://gcs.wuddit.com:3000"],
      "responseHeader": ["Content-Type", "Authorization",  "Content-Length", "User-Agent", "x-goog-resumable", "Access-Control-Allow-Origin"],
      "method": ["GET", "POST", "PUT", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

这是获取调用：

const uploadHandler = async (theFile, signedUrl) => {
  try {
    const response …

我.env在我的项目根目录中创建了一个文件，但我不熟悉环境/变量，所以我不确定如何集成该文件，以便我可以覆盖库存的、未弹出的 react-app eslint 设置。

// My .env file has just this

EXTEND_ESLINT = "true"

该CRA文档解释变量是什么，但不是现在把它设置为true。此外，“扩展 ESLint 配置”部分仅在 var 设置为 true 时有用。

// stock create-react-app package.json

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

我可以将 Recoil 原子的默认值设置为对象吗？

例如：

export const currentUserState = atom({
  key: 'currentUserState',
  default: { name: '', email: '', userId: null },
});

然后设置它：

import { currentUserState } from '../atoms/atoms';

const setUserState = useSetRecoilState(currentUserState);
setUserState(name: 'John', email: 'foo@bar.com', userId: getRand());

如何在组件中添加onScroll侦听器以捕获父元素的滚动？

class ChildDiv extends React.Component {
  constructor() {
    super();
  }
  handleScrollOfParent() {
    // do stuff when parent <main> scrolls;
  }
  render() {
    return (
      <div id="child" onScroll={this.handleScrollOfParent.bind(this)}>
        // content with overflow: hidden and scroll handled by parent MAIN.
      </div>
    )
  }
}
export default ChildDiv;

像这样在父主渲染中渲染，<main><ChildDiv /></main>我想捕捉主滚动。

我试图理解为什么这个例子中的蓝色 div 并不总是在上面？即为什么红色 div #2 位于蓝色孩子 1 的顶部。

body {
  padding: 30px;
}
.red1 {
  position: absolute;
  z-index: 1;
  width: 400px;
  height: 200px;
  background: red;
}
.red2 {
  position: absolute;
  z-index: 1;
  width: 400px;
  height: 200px;
  top: 250px;
  background: red;
}
.blue {
  z-index: 9;
  padding: 10px;
  text-align: center;
  color: white;
  text-transform: uppercase;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 150px;
  height: 130px;
  background: blue;
}

<div class="red1">
  <div class="blue">
    blue child 1
  </div>
</div>
<div class="red2">
  <div class="blue">
    blue …

我正在使用 Vue Router 和 scrollBehavior 并且每个路由仍然加载页面顶部 (0,0)，而不是记住我的滚动位置。对我缺少什么的想法？

这是我的路由器代码：

const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
    return savedPosition;
  } else {
    return { x: 0, y: 0 };
  }
};
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  scrollBehavior,
});