小编dwi*_*wix的帖子

避免重新渲染列表中的每个组件,同时只更新 React 中的一个组件

我有一个使用 Firebase v9 的简单聊天应用程序,其中这些组件按以下分层顺序从父级到子级:ChatSectionChatChatLineEditMessage

我有一个名为useChatService保存 in 状态列表的自定义钩子messages,该钩子在 in 中调用ChatSection,钩子返回 ,messages我将它们从ChatSectionprop 中传递到Chat,然后循环messages并为每条消息创建一个ChatLine组件。

我可以单击Edit每条消息前面的按钮,它显示EditMessage组件,以便我可以编辑文本,然后当我按“Enter”时,该函数updateMessage将被执行并更新数据库中的消息,但随后每个消息ChatLine都会再次重新渲染,随着列表变大,这是一个问题。

编辑 2:我已经完成了使用 Firebase v9 制作一个工作示例的代码,以便您可以在每次(添加、编辑或删除)消息之后可视化我正在讨论的重新渲染。我正在使用 ReactDevTools Profiler 来跟踪重新渲染。

ChatSection.js:

import useChatService from "../hooks/useChatService";
import { useEffect } from "react";
import Chat from "./Chat";
import NoChat from "./NoChat";
import ChatInput from …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-hooks

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

React 自定义 Hook 和常规函数之间的区别

常规 JS 函数、辅助/服务函数和 React Custom Hook 之间有什么区别?

我发现的类似答案没有给出任何好的示例,因此我创建了这个“服务”函数,我将使用它来列出其他函数组件中的一些用户:

import axios from "axios";

const useService = () => {
  const fields = [
    { key: "name", _style: { width: "40%" } },
    { key: "email", _style: { width: "40%" } },
  ];

  const getUsers = async () => {
    return await axios.get("http://127.0.0.1:8000/api/users");
  };

  const getBadge = (status) => {
    switch (status) {
      case "Active":
        return "success";
      case "Inactive":
        return "secondary";
      case "Pending":
        return "warning";
      case "Banned":
        return "danger";
      default:
        return "primary"; …
Run Code Online (Sandbox Code Playgroud)

reactjs

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

在Firestore查询中使用Where和Order by不同字段

我有一个名为 的 Firestore 集合channels,我想根据 ID 数组获取通道列表并按字段排序createdAt,这是我的函数:

  const getChannels = () => {
    const q = query(
      collection(db, "channels"),
      where(documentId(), "in", [
        "F0mnR5rNdhwSLPZ57pTP",
        "G8p6TWSopLN4dNHJLH8d",
        "wMWMlJwa3m3lYINNjCLT",
      ]),
      orderBy("createdAt")
    );
    const unsubscribe = onSnapshot(q, (snapshot) => {
      snapshot.docs.map((doc) => {
        console.log(doc.data());
      });
    });
    return unsubscribe;
  };
Run Code Online (Sandbox Code Playgroud)

但我收到这个错误

FirebaseError: inequality filter property and first sort order must be the same: __name__ and createdAt

仅当我 orderBy 时它才有效documentId()

我知道文档对此有限制,但我想知道是否有针对这种情况的解决方法。

我想这个问题的答案也不再有效了。

javascript firebase reactjs google-cloud-firestore

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

存储库和DAO设计模式之间的区别

我到处搜索,我仍然无法弄清楚存储库和DAO之间的区别.

假设我们有一个Product对象,所以对我来说它会是这样的:

class Product {
    public int id;
    public string name;
}

class ProductDAO {

    public void add(Product p) {//saving the product}
    public void delete(int id) {//deleting a product by id}
    public Product update(Product p) {//updating a product}
    public List<Product> listProducts() {//listing all products} 
}
Run Code Online (Sandbox Code Playgroud)

因此,在一个真实世界的项目中,每个实体应该与DAO类保持一对一的关系,并且根据我的阅读,一个存储库执行相同的工作,并且可以使用我在例如DAO,除了update方法?我不明白为什么,这是真的吗?

你能给我一个描述差异的小例子吗?

先感谢您.

java dao design-patterns repository java-ee

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

直接在 Laravel 中运行 artisan 命令时创建日志文件

我在Kernel课堂上有这个命令:

/**
 * Define the application's command schedule.
 *
 * @param  \Illuminate\Console\Scheduling\Schedule $schedule
 * @return void
 */
protected function schedule(Schedule $schedule)
{
    $schedule->command('products:import')
        ->appendOutputTo(storage_path('logs/import.log'));
}
Run Code Online (Sandbox Code Playgroud)

该方法创建一个名为的文件import.log,其中包含我在导入产品时添加的日志记录,并且运行良好。但是我需要能够php artisan products:import直接运行并在不调用类中的schedule方法Kernel或使用php artisan schedule:run.

我也没有在文档中找到。我应该添加什么来php artisan products:import创建文件?

编辑:如果我运行php artisan schedule:run,日志文件会因为 被创建appendOutputTo(storage_path('logs/import.log'));,但如果我php artisan products:import直接运行,则不会创建日志文件。我需要知道我应该在php artisan products:import命令行中添加什么以使其在这种情况下也能正常工作。

laravel

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

XAMPP中的php.ini缺少XDebug配置

我刚从官方网站上安装了最新的XAMPP for PHP 5.6,我需要启用Xdebug,我发现该文件php_xdebug.dll存在C:\xampp\php\ext,但是根本没有[XDebug]配置,php.ini我不知道如何制作它工作.它应该默认安装并预先配置,我们只需要取消注释xdebug配置,php.ini但事实并非如此.我甚至尝试使用PECLcommmand 再次安装它,pecl install xdebug但是我收到以下错误:

pecl install xdebug
downloading xdebug-2.5.0.tgz ...
Starting to download xdebug-2.5.0.tgz (267,640 bytes)
.........done: 267,640 bytes
ERROR: failed to mkdir C:\php\pear\docs\xdebug\contrib
Run Code Online (Sandbox Code Playgroud)

在PHPStorm中,当我选择通过php.exe在XAMPP目录中选择添加解释器时,它Debugger : Not installed也会说.

我重新安装了XAMPP,但我仍然遇到同样的问题.提前致谢.

php xampp xdebug phpstorm

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

这个递归函数是如何解决的,为什么它会输出它的作用

我发现自己无法理解这个递归函数的例子:

function foo(i) {
  if (i < 0)
    return;
  console.log('begin:' + i);
  foo(i - 1);
  console.log('end:' + i);
}
foo(3);
Run Code Online (Sandbox Code Playgroud)

输出是:

begin:3
begin:2
begin:1
begin:0
end:0
end:1
end:2
end:3
Run Code Online (Sandbox Code Playgroud)

我理解正常和嵌套函数是如何工作的,我认为return;这里应该i在低于时退出函数0,所以当i = -1第一个console.log()没有显示时,为什么在foo(-1 - 1)得到输出之后end:0

javascript recursion function

3
推荐指数
1
解决办法
232
查看次数

MySQL 添加 where 子句 if 字段不为空

我有一个news表,我想news通过按列 & 进行过滤来start_at获取所有已开始但尚未结束的表end_at

"select * from `news` where `start_at` <= NOW() and `end_at` >= NOW()"
Run Code Online (Sandbox Code Playgroud)

或者就像我在 Laravel 中所做的那样:

$news = News::where("start_at", '<=', date("Y-m-d"))
            ->where("end_at", '>=', date("Y-m-d"))->get();
Run Code Online (Sandbox Code Playgroud)

但如果列为 NULL,我也想忽略按列的过滤end_at,因此如果列为 NULL,我希望显示结果,就好像我只使用此查询一样:

"select * from `news` where `start_at` <= NOW()"
Run Code Online (Sandbox Code Playgroud)

提前致谢。

mysql laravel

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

按asc或desc以外的自定义顺序对Laravel Collection进行排序

我有这个数组作为Laravel Collection:

"data": [
  {
    "id": 863368,
    "reference": "Ref 1",
    "status": 1
  },
  {
    "id": 863391,
    "reference": "Ref 2",
    "status": 2
  },
  {
    "id": 863390,
    "reference": "Ref 3",
    "status": 2
  },
  {
    "id": 863396,
    "reference": "Ref 4",
    "status": 3
  }
];
Run Code Online (Sandbox Code Playgroud)

我需要按status而不是按asc或对其进行排序desc,但是具有状态的记录2应首先在列表上,然后是状态,1然后是状态3

我不知道如何实现这一目标,在此先感谢您。

php laravel laravel-5

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

在 onChange 中获取 React DatePicker 日期值

我正在使用react-datepicker,但无法获取 中的实际日期onChange

\n

这是我的组件:

\n
import DatePicker from "react-datepicker";\n\nconst DatePick = () => {\n  return (\n    <DatePicker\n      locale="fr"\n      dateFormat="dd/MM/yyyy"\n      onChange={(date) => {\n        console.log(date);\n      }}\n    />\n  );\n};\n\nexport default DatePick;\n
Run Code Online (Sandbox Code Playgroud)\n

在 console.log 中我得到了这种 string Thu Dec 09 2021 00:00:00 GMT+0100 (heure normale d\xe2\x80\x99Europe centrale)

\n

我需要获取日期dd-MM-yyyyonChange可以格式化并稍后在表单中使用的日期并提交其值。

\n

reactjs react-datepicker

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