小编Öze*_* B.的帖子

在创建和编辑页面中使用相同表单组件的良好实践

我有一个包含 30-40 个字段的拥挤表单,其中大多数都有相当复杂的逻辑。可以理解的是,我想让这些表单区域可重复用于创建和编辑页面,因为两者在表单项和字段方面是相同的。我毫不费力地让它们工作,而且它们在大多数情况下都工作得很好,除了对可重用性的追求引入了一些其他挑战,现在我怀疑这是否值得。

对我来说,使用相同的表单进行创建和编辑的一些挑战是:

  • 条件无处不在。想要使字段在编辑模式下不可编辑吗?额外的道具可以传入并禁用这些道具的所述字段。

  • 编辑模式需要初始状态,因此表单字段会填充现有数据,但创建页面不喜欢这样,所以甚至更多、更糟糕的情况,例如:

const { user } = React.useContext(DetailContext) ?? {}; // I know...
const [userType, setUserType] = useState(user?.user_type ?? null); // yep
Run Code Online (Sandbox Code Playgroud)

此时我什至无法决定如何安全地分配和使用东西,而且我无法估计哪些部分容易损坏。

这是不可避免的、很好的事情还是这完全是愚蠢的?使表单区域或表单可重用有哪些好的做法?我可以在不牺牲可重用性的情况下降低噪音吗?

javascript reactjs

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

如何在没有 useEffect 或 setState 函数的情况下重新触发钩子?

我正在使用一个自定义钩子,它将 URL 作为参数并返回获取数据及其加载状态。因此,与大多数钩子不同,我没有在需要时设置新状态的功能,这在项目的这一点上导致了各种问题,因为我碰巧需要一种方法来在每次收到自定义钩子时重新触发它新的道具值。

问题是,正如预期的那样,组件的状态是在组件第一次渲染时设置的,但是当它接收到新的 props 时,它不会重新渲染/重新触发。

这是自定义钩子的样子:

//useFetch.js

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  async function fetchUrl() {
    const response = await fetch(url);
    const json = await response.json();
    setData(JSON.parse(JSON.stringify(json)));
    setLoading(false);
  }

  useEffect(() => {
    fetchUrl();
  }, []);

  return [data, loading];
}

export { useFetch };
Run Code Online (Sandbox Code Playgroud)

这就是我使用这个钩子的方式:

//repos.js

import React from "react";
import { useFetch }  from "./fetchHook";


function Repos(props) {
  const [userRepos, reposLoading] = useFetch(`https://api.github.com/users/${props.users[props.count].login}/repos`);

  return …
Run Code Online (Sandbox Code Playgroud)

reactjs react-hooks

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

如何让 CSS 滚动捕捉与 JS 滚动事件侦听器一起使用?

我正在处理这个项目,我需要滚动侦听器和滚动捕捉,以便我可以在部分更改之间制作一些很酷的过渡效果。我可以让这两个单独工作,但不能一起工作。滚动捕捉需要容器元素 ( mainelement) 具有高度,但是当我给它一个 时height: 100%,JS 滚动侦听器停止工作。我尝试了我所知道的一切,尝试更改其他容器的高度/溢出属性,并尝试定位除body或之外的其他元素window。最好的解决方法是什么?

此处的代码段经过调整以与侦听器 ATM 一起使用。如果继续添加height: 100%main,您将看到滚动捕捉开始工作但事件侦听器中断。

const scrollEvent = () => {
  const main = document.querySelector('#main');
  const section1 = document.querySelector('#sect1');
  const section2 = document.querySelector('#sect2');

  if (main.scrollTop > 50) {
    section1.style.backgroundColor = "red";

  } else {
    section1.style.backgroundColor = "pink";
  }

  if (main.scrollTop > window.innerHeight / 2) {
    section2.style.backgroundColor = "blue";
  } else {
    section2.style.backgroundColor = "purple";
  }
}


window.addEventListener('scroll', scrollEvent);
Run Code Online (Sandbox Code Playgroud)
* {
  padding: 0;
  margin: …
Run Code Online (Sandbox Code Playgroud)

javascript css

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

在 PL/pgSQL 函数中分割逗号分隔的字符串

我正在尝试编写一个函数,该函数将 ID 作为输入并更新该给定 ID 上的一些字段。到目前为止,它看起来像这样:

CREATE FUNCTION update_status(p_id character varying,
                              p_status character varying DEFAULT NULL::character varying) RETURNS character varying
    LANGUAGE plpgsql
AS
$$
DECLARE
    v_row_count bigint DEFAULT 0;
    v_result    varchar(255);
BEGIN
    
    IF p_id IS NOT NULL THEN
        SELECT count(user_id)
        INTO v_row_count
        FROM test
        WHERE user_id = p_id;
    END IF;

    IF v_row_count <= 0 THEN
        v_result = 'User not found';
        RETURN v_result;

    ELSE
        IF p_id NOT LIKE '%,%' THEN
            UPDATE test
            SET status     = p_status,
                updated_by = 'admin'
            WHERE user_id IN …
Run Code Online (Sandbox Code Playgroud)

sql postgresql plpgsql

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

Passing arguments with escape characters to a batch file from PowerShell prompt

I have a batch file which runs a Python package, and it takes a string argument to run. The string, usually a Youtube link, has assignment symbols (=) so the argument must be enclosed in quotation marks to work properly. And it does work fine when I call it from command prompt like so (the file's path is set in environment variables so it can be called directly with its name):

script-name "https://www.youtube.com/playlist?list=PLZlA0Gpn_vH_CthENcPCM0Dww6a5XYC7f"
Run Code Online (Sandbox Code Playgroud)

This command works fine on …

powershell batch-file

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