问题[reactjs](coding)

我正在使用 @paypal/react-paypal-js 包将 PayPal JavaScript SDK 集成到我的 React + TypeScript 应用程序中。我的目标是显示带有“PP”徽标的 PayPal 按钮，如 PayPal 文档中所示：https://developer.paypal.com/sdk/js/reference/#label 预期结果

然而，无论怎样配置，按钮都只显示“PayPal”文字，没有“PP”标志： 实际结果

我试过：

• 以按钮样式设置标签。
• 调整按钮样式：布局、颜色、形状和高度。
• 确保容器具有足够的宽度。

<PayPalButtons
    style={{
        color: 'gold',
        layout: 'horizontal',
        shape: 'pill',
        label: 'paypal',
        tagline: false,
        height: 40,
    }}
    onApprove={onApprove}
    onError={onErrorFunc}
    onCancel={onCancelFunc}
/>

我正在努力使用 react-hook-form 创建一个动态表单useFieldArry，每当最后一个字段元素非空时，它就会附加一个新的字段/输入（这样用户就不必关心添加更多输入）。

虽然我有一个针对简单情况（通过输入添加数据）的解决方案，但在以下情况下会失败：重置表单并以编程方式填充数据（例如，点击按钮）时，它会在最后附加两个空输入框。起初我以为这与 React 的严格模式有关，但即使在生产版本中也会出现这种情况。

有没有什么线索可以解释为什么会发生这种情况，有没有什么解决方案（甚至是最佳实践）可以解决这个问题？

这是一个最小的工作示例：

import { useEffect } from "react";
import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form";

interface FormValues {
  items: {
    text: string;
  }[];
}

export default function DynamicForm() {
  const { control, reset } = useForm<FormValues>({
    defaultValues: {
      items: [{ text: "" }],
    },
  });

  const { fields, append } = useFieldArray({
    control,
    name: "items",
  });

  const watchItems = useWatch({
    control,
    name: "items",
  });

  useEffect(() => {
    if (watchItems && watchItems.length > 0) {
      const lastItem = watchItems[watchItems.length - 1];
      if (lastItem?.text && lastItem.text.trim() !== "") {
        append({ text: "" }, { shouldFocus: false });
      }
    }
  }, [watchItems, append]);

  const handleInsertData = () => {
    reset({
      items: [{ text: "X" }],
    });
  };

  return (
    <div className="p-6 max-w-md mx-auto bg-white rounded-xl shadow-md">
      <button onClick={handleInsertData}>Insert Data</button>
      <h2 className="text-xl font-bold mb-4">Dynamic Form</h2>

      <form>
        <div className="space-y-4">
          {fields.map((field, index) => (
            <div key={field.id} className="flex items-start space-x-2">
              <div className="flex-grow">
                <Controller
                  control={control}
                  name={`items.${index}.text`}
                  render={({ field }) => (
                    <textarea
                      {...field}
                      className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="Enter text..."
                    />
                  )}
                />
              </div>
            </div>
          ))}
        </div>
      </form>
    </div>
  );
}

  var [testVar,setTestVar]=useState(0)

  var showTestVar=()=>{
    console.log(testVar)
  }

  var effectTest=()=>{
    setTestVar(1)
    setInterval(showTestVar,1000)
  }

我想要一个名为 showTestVar 的函数，每当有事件发生时都会调用它。在本例中，是从 setInterval 触发的。我希望无论 testVar 是否发生变化，都会调用它，但每次发生事件时都会调用。如何使用 Hooks 实现这一点？

事实上，日志每秒显示 3 个输出，1 个零和 2 个一。

我刚刚使用命令 npx @react-native-community/cli init 在 ubuntu lts 上创建了一个新的 React Native 项目，并且项目创建得很好。完成项目后，我使用 CD 进入项目文件夹并运行 npx react-native run-android。它给我的错误消息是 Android/Sdk/ndk/27.1.12297006 没有 source.properties 文件

我正在开发一个带有内置文件管理器的 React 页面。我有一个DocumentTable.js组件，负责显示当前可用的文件列表，并且它(除其他功能外)具有以下三个相互调用的函数：

const getParamPath = useCallback((path, operation, currentFolderPath, fileName) => {

    const paramPath = (

        path +
        "/?operation=" + operation +
        ((fileName === undefined) ? "" : ("&fileName=" + currentFolderPath + fileName))
    )

    return paramPath
},
    []
)

const getAllFiles = useCallback((path, currentFolderPath, fileName) => {

    const setData = (fileData) => {

        const newFolderPath = fileName === undefined ? currentFolderPath : (currentFolderPath + fileName + "/")

        fileDataSetter(fileData)
        folderPathSetter(newFolderPath)
    }

    dataGetter(getParamPath(path, "0", currentFolderPath, fileName), setData)
},
    [dataGetter, getParamPath, fileDataSetter, folderPathSetter]
)

useEffect(() => {

    getAllFiles(path, currentFolderPath)
},
    [getAllFiles, path]
)

它首先使用和从父组件继承的变量useEffect()进行加载。它是调用 的函数之一，该函数向后端 API 发送请求，以获取起始文件夹中可用的文档列表。它使用同样从父组件（、、）继承的各种函数来完成此操作，并且还调用三个函数中的最后一个，即使用查询参数为后端 API 构建路径字符串的函数。它不仅在需要时具有 ，而且还具有一个变量，该变量将告诉后端需要做什么（0 - 显示所有内容，1 - 下载文件，2 - 重命名文件，3 - 删除文件等）。pathcurrentFolderPathgetAllFiles()dataGetterfileDataSetterfolderPathSettergetParamPath()fileNameoperation

如果用户点击一个文件，该文件就会下载到他们的电脑上。但是，如果他们点击一个文件夹，该currentFolderPath变量（最初为空字符串）就会更新为包含fileName和/smybol，然后由于 useEffect 的作用，页面会重新渲染该文件夹中的文件列表。

但所有这些对于我的问题来说并不是非常重要，因为编译器由于 useEffect 依赖关系不断抛出警告，即：

React Hook useEffect 缺少依赖项“currentFolderPath”。请添加它或移除依赖项数组 react-hooks/exhaustive-deps。

然而问题是，如果没有这个警告，程序现在就可以按预期完美运行，而如果我删除依赖数组，显然 useEffect 会在我打开页面时被无限调用，而另一方面，如果我将其包含currentFolderPath在数组中，useEffect 会在起始文件夹中不断重新渲染，最终导致越来越多的后端错误。

我的问题是，如何在不影响程序功能的情况下清除这个警告？这是我收到的第一个警告，如果我想要一个可以正常运行的程序，它似乎应该永远被忽略。我是不是做错了什么？

.d.ts使用 Vite、TypeScript 和 React。VS Code 自动导入自定义文件时遇到问题

手动导入工作正常，.d.tsTypeScript 可以检测到该文件。VS Code 的问题在于无法为 选择自动导入Button.d.ts。如果我将其重命名为 ，VS Code 可以检测到该.d.ts文件并自动导入index.d.ts。

文件夹结构：

src/
  ├── components/
  │    ├── Button/
  │    │    ├── Button.tsx
  │    │    └── Button.d.ts

Button.d.ts：

export type TypeButton = {className?:string}

Button.tsx：

import type {TypeButton} from "./Button.d"
const Button = ({className=""}:TypeButton) =>{
    return <button className={className}></button>
}
export default Button

package.json：

{
  "name": "made-you-look",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react-swc": "^3.8.0",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.24.1",
    "vite": "^6.2.0"
  }
}

tsconfig.json：

{
    "compilerOptions": {
        "baseUrl": "./",
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "isolatedModules": true,
        "moduleDetection": "force",
        "noEmit": true,
        "jsx": "react-jsx",

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        "noUncheckedSideEffectImports": true,
        "declaration": true
    },
    "include": ["src"]
}

我遇到了一个意外的行为。也就是说，我在查询中设置了一个跳过条件，但即使跳过条件应该为真，查询仍然在运行。我已经对这个错误进行了最小程度的复现。

App.jsx：

import { useState } from "react";
import "./App.css";
import { Test } from "../test";
import { useApolloClient } from "@apollo/client";

export default function App() {
  const [bool, setBool] = useState(false);
  const client = useApolloClient();
  return (
    <main>
      <button
        onClick={() => {
            if (bool) {
              client.resetStore();
            }
          setBool((bool) => {
            return !bool;
          });
        }}
      >
        Click me
      </button>
      {bool && <Test bool={bool} />}
    </main>
  );
}

测试.jsx：

import { gql, useQuery } from "@apollo/client";

const testQuery = gql`
  query {
    countries {
      name
    }
  }
`;
export const Test = ({ bool }) => {
  const { data, loading, error } = useQuery(testQuery, {
    skip: !bool,
    variables:{holy:"shit"}
  });
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;
  return (
    <div>
      {data.countries.map((country) => (
        <div key={country.name}>{country.name}</div>
      ))}
    </div>
  );
};

我正在使用 Apollo GraphQL 提供的国家 API。

在这里，当第一次点击按钮时，查询会被发送到合理的服务器。然后，当再次点击按钮时（即设置 bool=false），缓存应该会被清除，查询也不应该运行，因为它被跳过了，但它确实运行了（我可以通过查看网络选项卡看到它正在运行）。通过进行测试的条件渲染，我以为查询肯定不会运行，因为组件甚至不会渲染，但它又运行了，所以我认为问题在于查询在缓存被清除和 ReactJS 完全更新状态之间运行。我想我不理解一些关于状态的概念。如何在我不希望查询运行的时候阻止它运行？感谢您的帮助。

你可以在这里亲自查看replitLink

我正在通过 get API 获取 tsmin 和 tsmax 值。我已定义一个包含 gte 验证的 zod 模式。

  const tsmin = Number(getMinMechProp("tensilestrength"));
  const tsmax = Number(getMaxMechProp("tensilestrength"));

 const mechPropSchema = z.object({
   tensilestrength: z.coerce.number()
      .gte(tsmin, `Value must be at least ${tsmin}`),
});

现在我只想在 tsmax > 0 时应用 zod lte 验证。

我不知道实现这一目标的最佳方法

我已经将 tailwindcss v4 作为文件中的 vite 插件与其他应用程序一起使用vite.config.ts。

类似这样：

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

我不确定这是否是使用 electron-vite 的正确方法，因为我尝试过的每种方法都不起作用。

我的electron-vite构建是

npm create @quick-start/electron@latest

✔ Select a framework: › react
✔ Add TypeScript: …  / Yes
✔ Add Electron updater plugin: …  / Yes
✔ Enable Electron download mirror proxy: …  / Yes

我删除了其中的所有文件/assets，并添加了一个global.css包含以下内容的文件：

@import "tailwindcss";

我收到错误Cannot find module '@tailwindcss/vite' or its corresponding type declarations.

import tailwindcss from '@tailwindcss/vite'

我的electron.vite.config.ts文件看起来像这样

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [react(), tailwindcss()]
  }
})

我已经尝试过使用postcss.config.js。但在 v4 中，它应该像tailwindcss-v4博客中所说的那样简单：

npm i tailwindcss @tailwindcss/postcss;

export default {
  plugins: ["@tailwindcss/postcss"],
};

@import "tailwindcss";

我还没找到相关文档。有人能解决吗？

我正在尝试将我的项目从 React 迁移到 NextJS，这涉及到上下文的使用。我将子组件封装在上下文提供layout.tsx程序中，放在我需要的路由（应用路由器）的文件中。但是，当我尝试在某个子组件中使用该上下文时，它不起作用。它什么也没做。

我已经确保上下文创建、子组件以及所有内容都是客户端组件，但仍然无法正常工作。请问有什么可以帮到我吗？

//consuming context
'use client'
import { useState } from "react"
import Image from "next/image"
import api from "../../../interceptors"
import { useRouter } from "next/navigation"
import create_simulation from "../../../public/create_simulation.svg"
import { useUserRoomContext } from "../../../lib/contexts/UserContext"

const CreateInterview = () => {
    const [loading,setLoading]=useState(false)
    const [error,setError]=useState("")
    const [interviewDetails , setInterviewDetails] = useState({
        company_name : "" , 
        job_description : "" , 
        role: "",
        resume: "",
    })
    

    const router = useRouter()
    const {setRoomId, setToken}=useUserRoomContext()

// context
"use client"
import {createContext, useState, useContext} from "react"

const userRoomContext = createContext()
export const useUserRoomContext = () => useContext(userRoomContext)

export const UserRoomProvider = ({children}) =>{

    const [roomId,setRoomId] = useState("")
    const [token,setToken]=useState(null)
    const [reportGenerated,setReportGenerated]=useState(false)

    const value={
        roomId,
        setRoomId,
        token,
        setToken,
        reportGenerated,
        setReportGenerated
    }

    return <userRoomContext.Provider value={value}>
        {children}
    </userRoomContext.Provider>
}

以下是对其子项使用上下文提供程序的布局：

"use client"
import React from 'react'
import { UserRoomProvider } from '@/lib/contexts/UserContext'
import ProtectedRoute from '@/components/protection/ProtectedRoute'

const InterviewLayout = ({children}: Readonly<{children: React.ReactNode}>) => {
    console.log("Interview layout rendered")
    return (

        <UserRoomProvider>
            <ProtectedRoute>{ children }</ProtectedRoute>
        </UserRoomProvider>
      )
    
}

export default InterviewLayout