小编Mar*_*che的帖子

如何检测何时加载图像,通过道具提供,并在React中更改状态?

我想在加载最终头像时加载不同的图像(假化身).想法是检测何时加载道具图像并改变状态.可能吗?一些想法?谢谢!

class ImageUser extends React.Component {

constructor(props) {
    super(props);
    this.state = {userImageLoaded: false};
    let imageSrc = "";

    if (!this.props.userImage) {
        imageSrc = this.props.noUserImage;
    } else {
        imageSrc = this.props.userImage;
    }

    this.loadingImage = <img className={styles.imageUser}
                     src={this.props.loadingImage} alt="2"/>;

    this.userImage =
        <img onLoad={this.setState({userImageLoaded: true})}
             className={styles.imageUser} src={imageSrc}
             alt="1"/>;

}

render() {
    let image = "";
    if (this.state.userImageLoaded) {
        image = this.userImage;
    } else {
        image = this.loadingImage;
    }
    return (
        <div>
            {image}
        </div>
    );
}
}

export default ImageUser;
Run Code Online (Sandbox Code Playgroud)

javascript state image loading reactjs

13
推荐指数
3
解决办法
9802
查看次数

测试mongoose pre-save hook

我是测试nodejs的新手.所以我的方法可能完全错了.我尝试在没有命中数据库的情况下测试mongoose模型pre-save-hook.这是我的模型:

// models/user.js
const mongoose = require("mongoose");
const Schema = mongoose.Schema;

UserSchema = new Schema({
    email: {type: String, required: true},
    password: {type: String, required: true}    
});

UserSchema.pre('save', function (next) {
    const user = this;
    user.email = user.email.toLowerCase();
    // for testing purposes
    console.log("Pre save hook called");
    next();
});

module.exports = mongoose.model("User", UserSchema);
Run Code Online (Sandbox Code Playgroud)

正如我所说的,我不想用我的测试命中数据库,所以我尝试使用Users save()方法的sinon存根:

// test/models/user.js
const sinon = require("sinon");
const chai = require("chai");
const assert = chai.assert;

const User = require("../../models/user");

describe("User", function(){
    it("should convert email to lower case before …
Run Code Online (Sandbox Code Playgroud)

unit-testing mocha.js mongoose node.js sinon

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

Array.prototype.splice - 帮助理解课程

这是教程中的一个函数:

function add() {
    var values = Array.prototype.splice.call(arguments, [1]),
        total = 0;

    for(var value of values) {
        total += value;
    }

    return total;
}
Run Code Online (Sandbox Code Playgroud)

资源

这个表达Array.prototype.splice.call(arguments, [1])让我很困惑.

  1. 为什么1
  2. 为什么用括号[1]

如果我们传递1,它表示start位置splice(),所以它将跳过我们传递给的第一个参数add(),因此它不会添加所有参数......

这是教程中的错误吗?

javascript

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

Firebase:多个应用程序连接到单个 Firestore

这是一个非常广泛的问题。对于那个很抱歉。

我第一次尝试使用 firebase。我想使用 firebase、React 和 Next 构建一个小的电子商务 web 应用程序。我想将应用程序拆分为两个不同的应用程序:一个管理应用程序(用于创建产品和执行其他管理工作)和实际的商店应用程序。应用程序应该托管在两个不同的域上,但它们应该与同一个云防火墙通信。

什么是实现这种架构的好设置?目前我正在考虑为管理员和商店应用程序创建单独的 firebase 项目,以便我可以将它们托管在不同的域上。云 Firestore 将与所有与管理相关的云功能等一起存在于管理项目中。商店应用程序(或客户端应用程序)将拥有自己的托管项目,并将从管理项目连接到 Firestore。

这听起来像一个合理的架构还是我完全走错了路。任何建议表示赞赏。再次为问题的广泛性感到抱歉。

firebase firebase-hosting google-cloud-firestore

8
推荐指数
1
解决办法
6227
查看次数

Reactjs 下载没有锚标记或没有在新选项卡中打开文件的文件

我从 API 获取文件 url,例如“ http://example.com/sample.jpg ”。这是我当前的代码:

<a href={item.mediaUrl} target="_blank" className="ml-2">
<i className="fa fa-download"></i></a>
Run Code Online (Sandbox Code Playgroud)

但我想直接下载文件,而不在新的浏览器选项卡中打开文件。我还尝试了按钮上的 onClick 事件:

//HTML
<button onClick={() => this.downloadFile(item.mediaUrl)}>Download</button>
//Function
downloadFile = (url) => {
   window.open(url);
}
Run Code Online (Sandbox Code Playgroud)

这也会在新的浏览器选项卡中打开文件。如何直接在reactjs中从url下载文件,而不在新的浏览器选项卡中打开文件?

html javascript reactjs

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

无法从 Firebase 模拟器打开电子邮件登录链接

我在使用带有(无密码)电子邮件链接登录的 firebase 身份验证模拟器时遇到问题。一切似乎都工作正常:sendSignInLinkToEmail(auth, email, actionCodeSettings)模拟器 shell 为我提供了一个链接,例如

\n
To sign in as test@test.de, follow this link: http://localhost:9099/emulator/action?mode=signIn&lang=en&oobCode=bXfR9zhWzkvm9APe_7jsM6Ks3UTyi2gsobaW3FMrVG4HUsXXnZdMoK&apiKey=fake-api-key&continueUrl=localhost%3A3000%2FfinishSignUp%3FcartId%3D1234\n
Run Code Online (Sandbox Code Playgroud)\n

但是,当我尝试在浏览器中打开此链接时,Chrome 会尝试打开一个应用程序来处理此链接。火狐浏览器 说:

\n
Firefox doesn\xe2\x80\x99t know how to open this address, because one of the following protocols (http) isn\xe2\x80\x99t associated with any program or is not allowed in this context.You might need to install other software to open this address.\n
Run Code Online (Sandbox Code Playgroud)\n

我是否错过了什么或者其他人也遇到过这种情况?

\n

firebase firebase-tools firebase-authentication

5
推荐指数
0
解决办法
234
查看次数

快速验证器v4的检查功能中的访问请求体

我刚开始使用带有express-validator的express.js来验证一些输入数据,我在4.0.0版本中引入的新检查API中访问请求体时遇到了问题.

在旧版本中,您只需在body-parser之后的某个地方的app.js中添加express-validator作为中间件:

// ./app.js
const bodyParser = require("body-parser");
const expressValidator = require("express-validator");

const index = require("./routes/index");

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(expressValidator());
Run Code Online (Sandbox Code Playgroud)

然后在我的索引路径中,我可以检查post方法的最终回调函数中的字段.

// ./routes/index.js
const express = require("express");
const router = express.Router();

router.post("/submit", (req, res, next) => {
    // check email
    req.check('email','Invalid email address').isEmail()
    // check if password is equal to password confirmation
    req.check('password', 'Invalid password')
    /* Access request body to compare password 
    field with password confirmation field */
    .equals(req.body.confirmPassword)

    // get errors
    const errors …
Run Code Online (Sandbox Code Playgroud)

javascript node.js express express-validator

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

React JS 中虚拟 DOM 和真实 DOM 的区别?

谁能解释一下 React JS 中的虚拟 DOM 和真实 DOM 之间的区别吗?我得到了以下答案,但我仍然不清楚。任何帮助将不胜感激。

\n\n
\n

虚拟 DOM 是一个轻量级的 JavaScript 对象,最初只是真实 DOM 的副本。它是一个节点树,列出了元素、它们的属性和内容作为对象及其属性。React\xe2\x80\x99s 渲染函数从 React 组件中创建一个节点树。然后,它更新该树以响应数据模型中的突变,这些突变是由用户或系统执行的各种操作引起的。

\n
\n

reactjs

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