小编Sul*_*Sah的帖子

我正在尝试使用新的 sass 模块系统的功能@use。即使在阅读文档并尝试做同样的事情之后，也无法弄清楚如何正确使用它。这是我尝试过的：

在Buttons.scss文件中我声明了这些变量

$border-color: black;\n$color: white;\n$bg: beige;\n

这样，在main.scss文件中，我导入Buttons.scss文件并尝试使用Buttons.scss文件具有的变量。

@use "buttons";\n\n$button-color: buttons.$color;\n$button-bg: buttons.$bg;\n$button-border-color: buttons.$border-color;\n\n.btn{\n    color: $button-color;\n    border: 1px solid $button-border-color;\n    background: $button-bg;\n    padding: 8px 12px;\n    display: inline-block;\n}\n

文件夹结构如下所示

css\nsass\n \xe2\x94\xa3 buttons.scss\n \xe2\x94\x97 main.scss\n

并且编译时会抛出错误Invalid CSS after \\"...-color: buttons\\。我正在关注这个博客Sass 模块简介。

我该如何@use正确使用？

我工作useSelector的react-redux在我的阵营原生应用程序，我收到以下错误：

TypeError: TypeError: (0, _reactRedux.useSelector) is not a function.

我的代码是：

import { useSelector } from 'react-redux';

const availableMeals = useSelector(state => state.meals.filteredMeals);

根据官方文档，这是最简单的用法，useSelector但我收到此错误。

以前，我Redux在我的项目中遇到另一个错误，但它在一夜之间自动解决了，所以这个问题与某些缓存有关吗？

我该如何解决这个问题？

这是我的代码：

import React from 'react';
import { useSelector } from 'react-redux';

import { CATEGORIES } from '../data/dummy-data';
import MealList from '../components/MealList';

function CategoryMealScreen(props) {
    const catId = props.navigation.getParam('categoryId');

    const availableMeals = useSelector(state => state.meals.filteredMeals);

    const displayedMeals = availableMeals.filter(meal => meal.categoryIds.indexOf(catId) >= 0);

    return <MealList listData={displayedMeals} navigation={props.navigation} />; …

当用户输入电话号码时，我希望该号码以电话号码格式显示，例如 (123) 456-7890

我不知道如何去做，但这是我目前拥有的代码。

使用 UseState：

const [PNumber,setPNumber] = useState();

在我的文本输入中：

<TextInput
  style={Fonts.Inp}
  keyboardType={'number-pad'}
  placeholder="(604) 333-3333"
  placeholderTextColor='gray'
  maxLength={10}
  onChangeText = {(Text)=> setPNumber(Text)}
/>

因此目前，它显示为“1234567890”。我希望它显示为 (123) 456-7890

我的课程集合有这个嵌套架构，每个课程中有一个会话数组，每个会话中有一个学生数组，每个学生都是一个对象，由 userName 的属性和引用我的用户集合的 ObjectId 值和另一个属性组成名称包含一些数字的状态。

我想从会话的学生数组中删除一个学生对象及其 _id。

我知道可以展开数组来获取单个对象，但我需要一种巧妙的方法，例如使用 objectId 从数据库中删除对象，这样我们就不必指定路径，例如直接删除或修改嵌套子文档。

这是我的课程架构：

 CourseSchema = new mongoose.Schema({
    name:String,
    sessions:[
        {
         date:Date,
         students :[{
             userName:{
                type:mongoose.Schema.Types.ObjectId,
                ref :'users'
             },
             status:Number
         }]   
        }
    ]
})

我在编译 reactJS 组件时遇到问题：

import React, { Component } from "react";

class StatefullComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: 1, name: "Perceuse" },
        { id: 2, name: "disqueuse" },
        { id: 3, name: "marteau" },
        { id: 4, name: "clé de 17" },
        { id: 5, name: "meuleuse" }
      ],
      newItem: ""
    };
    this.addNewItemToState = this.addNewItemToState.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.removeThisItem = this.removeThisItem.bind(this);
  }

  sortItems() {
    this.setState({
      items: this.state.items.sort()
    });
  }

  addNewItemToState() {
    this.setState({
      items: …

我正在实现搜索功能，即在 mongoDB 中查找文档。我想.skip(x)在.limit(x)结果上模拟分页结果，但是我可以获取文档总数（在跳过和限制之前）并立即获取过滤结果吗？

产生预期输出的代码：

db.Datas.find({ type: "Unknown" })
  .then((result) => {
    let count = result.length;
    db.Datas.find({ type: "Unknown" })
      .sort({ createdAt: -1 })
      .skip((req.query.page - 1) * 10)
      .limit(10)
      .then((res) => {
        res.json({ count: count, result: res });
      });
  })
  .catch((err) => {});

但查询两次有点烦人，而且在大型数据库中可能会很慢。我尝试了类似的方法find({}).then(x => { ... }).sort(...) ...，但不起作用，因为它只返回 Promise。

我怎样才能有效地做这些事情？或者只是获取整个文档并跳过，用 JS 方式限制（使用 .splice 等）会更快更高效？

我知道这听起来非常简单，但我无法让它发挥作用。我知道我必须使用小胡子标签来显示它，但当我在表单字段中输入内容时它不会显示。这是我的代码：

<label>Variety name: {{seedForm.get('varietyName').value}}</label>

这是实际的表单域：

<mat-form-field>
    <mat-label>Variety name</mat-label>
    <input matInput name="variety" type="text" placeholder="The name of the variety" autofocus
        formControlname="varietyName" required>
</mat-form-field>

这是种子形式的定义：

this.seedForm = fb.group({
  'varietyName' : ['', Validators.required]
})

我不明白为什么这段代码不显示我输入的值。谁能告诉我我做错了什么？

谢谢。

我有一个 Products 组件，它显示一个类别的产品。CategoryId 取自路由参数，然后用户可以对产品进行分页。所以有2个useEffect，一个是categoryId改变的时候，另一个是当前页码改变的时候。如果我使用具有两个依赖项（categoryId 和 currentPage）的一个效果，我找不到将当前页码重置为 1 的方法。（当用户在类别 1 中并转到 2 页时，我想重置页码当类别改变时）

import React from "react";
import {
  useProductState,
  useProductDispatch
} from "../contexts/product.context";

const Products = props => {
  const categoryId = +props.match.params.id;

  const { categoryProducts, totalCount } = useProductState();
  const [currentPage, setCurrentPage] = React.useState(1);

  const dispatch = useProductDispatch();

  const pageSize = 2;
  const pageCount = Math.ceil(+totalCount / pageSize);

  React.useEffect(() => {
    setCurrentPage(1);
    dispatch({
      type: "getPaginatedCategoryProducts",
      payload: {
        categoryId,
        pageSize,
        pageNumber: currentPage
      }
    });
  }, [categoryId]);

  React.useEffect(() => {
    dispatch({ …

我正在尝试使用 javascript、html、css 创建一个页面，我可以通过在线链接调整图像大小。然而，当调整大小时，我遇到了使用时可能无法导出受污染的画布的错误Canvas.toDataURL()。我已经在谷歌和这里搜索了这个问题。有人建议将照片的跨域修改为匿名或“*”。我尝试了两种方法，但它对我不起作用。我想知道任何人都可以提供帮助。我的代码在下面的链接中。

https://jsfiddle.net/pangkachun/7axkq9pe/1/

var min_img_width = 60;
var min_img_height = 60;
var max_img_width = 1000;
var max_img_height = 1000;

var resizeableImage = function(image_target) {
  // Some variable and settings
  var $container,
      orig_src = new Image(),
      image_target = $(image_target).get(0),
      event_state = {},
      constrain = false,
      min_width = min_img_width, // Change as required
      min_height = min_img_height,
      max_width = max_img_width, // Change as required
      max_height = max_img_height,
      resize_canvas = document.createElement('canvas'),

  // ----------------- function to int the page ----------------------//
  init = …

以下代码犯了最奇怪的错误。

/src/components/competitions/TheVaultform.js 第 5 行：在函数“contactform”中调用 React Hook “useForm”，该函数既不是 React 函数组件，也不是自定义 React Hook 函数 react-hooks/rules-of-hooks

搜索关键字以了解有关每个错误的更多信息。

我刚刚安装了 react-hook-form 并运行了演示代码。

import React from 'react';
import { useForm } from 'react-hook-form';

export default function contactform() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => console.log(data);
  console.log(errors);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="First name" name="First name" ref={register({required: true, maxLength: 80})} />
      <input type="text" placeholder="Last name" name="Last name" ref={register({required: true, maxLength: 100})} />
      <input type="text" placeholder="Email" name="Email" ref={register({required: true, …