Perguntas[reactjs](coding)

Estou integrando o SDK JavaScript do PayPal ao meu aplicativo React + TypeScript usando o pacote @paypal/react-paypal-js. Meu objetivo é exibir o botão do PayPal com o logotipo "PP", conforme mostrado na documentação do PayPal: https://developer.paypal.com/sdk/js/reference/#label Resultado esperado

No entanto, apesar das várias configurações, o botão exibe apenas o texto "PayPal" sem o logotipo "PP": Resultado real

Tentei:

• Definindo rótulos no estilo do botão.
• Ajustando estilos de botões: layout, cor, formato e altura.
• Garantir que o contêiner tenha largura suficiente.

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

Estou com dificuldades para criar um formulário dinâmico com o react-hook-form useFieldArry, que acrescenta um novo campo/entrada sempre que o último elemento do campo não estiver vazio (para que o usuário não precise se preocupar em adicionar mais entradas).

Embora eu tenha uma solução funcional para casos simples (adicionar dados digitando), ela falha no seguinte caso: ao redefinir o formulário e preenchê-lo programaticamente com dados (por exemplo, clicando em um botão), ele adiciona duas entradas vazias no final. A princípio, pensei que isso estivesse relacionado ao Modo Estrito do React, mas isso acontece até mesmo na versão de produção.

Alguma ideia do porquê isso acontece, uma solução (ou até mesmo uma prática recomendada) para lidar com esse problema?

Aqui está um exemplo prático mínimo:

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)
  }

Quero ter uma função chamada showTestVar que seja chamada sempre que um evento ocorrer. Disparando a partir de setInterval neste caso. Quero que ela seja chamada independentemente de testVar ter sido alterado ou não, mas em todos os eventos. Como faço isso com Hooks?

Assim, o log mostra 3 saídas a cada segundo, 1 zero e 2 uns.

Acabei de criar um novo projeto React Native no Ubuntu LTS com o comando npx @react-native-community/cli init e o projeto foi criado perfeitamente. Depois de terminar o projeto, entrei na pasta do projeto com o CD e executei o npx react-native run-android. A mensagem de erro que me aparece é Android/Sdk/ndk/27.1.12297006 não tinha um arquivo source.properties

Estou trabalhando em uma página React que possui um gerenciador de arquivos integrado. Tenho um DocumentTable.jscomponente responsável por exibir a lista atual de arquivos disponíveis, e ele possui (entre outras) as três funções a seguir que se chamam entre si:

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]
)

Começa com useEffect()o carregamento com pathas currentFolderPathvariáveis ​​e herdadas do componente pai. É uma das funções que chamam getAllFiles(), que envia uma solicitação à API de backend para a lista de documentos disponíveis na pasta inicial. Ela usa várias funções também herdadas dos componentes pais ( dataGetter, fileDataSetter, folderPathSetter) para fazer isso, e também chama a última das três, getParamPath(), que é a que constrói a sequência de caminho com os parâmetros de consulta para a API de backend. Ela tem a variável fileNamewhen needed, mas também uma operationvariável que informará ao backend o que ele precisa fazer (0 - exibir tudo, 1 - baixar o arquivo, 2 - renomear o arquivo, 3 - excluir o arquivo, etc.).

Se o usuário clicar em um arquivo, ele será baixado para o computador. Se clicar em uma pasta, no entanto, a currentFolderPathvariável, que começa como uma string vazia, é atualizada para incluir o fileNamee um /smybol, e a página é renderizada novamente com a lista de arquivos nessa pasta, graças ao useEffect.

Porém, tudo isso não é muito importante para o meu problema, que é tão simples quanto o compilador constantemente lançando avisos por causa das dependências useEffect, a saber:

O React Hook useEffect possui uma dependência ausente: 'currentFolderPath'. Inclua-a ou remova a matriz de dependências react-hooks/exhaustive-deps.

No entanto, o problema é que agora o programa está funcionando perfeitamente como esperado, se não fosse por esse aviso, enquanto que se eu remover a matriz de dependências, obviamente useEffect será chamado infinitamente assim que eu abrir a página, enquanto por outro lado, se eu incluir currentFolderPathna matriz, o useEffect será constantemente renderizado na pasta inicial, eventualmente resultando em mais e mais erros de backend.

Minha pergunta seria: como posso limpar esse aviso sem comprometer a funcionalidade? Este é o primeiro aviso que recebo, que parece que deveria ser ignorado para sempre se eu quiser um programa funcional. Estou fazendo algo errado?

Usando Vite, TypeScript e React. Enfrentando um problema com a importação automática de .d.tsarquivos personalizados no VS Code.

As importações manuais funcionam bem, o .d.tsarquivo é detectado pelo TypeScript. Problema com o VS Code que não detecta importações automáticas para o formato Button.d.ts. O VS Code consegue detectar o .d.tsarquivo e importá-lo automaticamente se eu renomeá-lo para index.d.ts.

Estrutura de pastas:

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"]
}

Estou tendo um comportamento inesperado. Ou seja, coloquei uma condição de salto na consulta e, mesmo quando a condição de salto deveria ser verdadeira, a consulta continua sendo executada. Fiz uma reprodução mínima do bug.

Aplicativo.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>
  );
}

teste.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>
  );
};

Estou usando a API de países fornecida pela Apollo GraphQL.

Aqui, quando o botão é clicado pela primeira vez, a consulta é enviada ao servidor que faz sentido. Então, quando ele é clicado novamente (ou seja, tornando bool=false), o cache deve ser limpo e a consulta não deve ser executada, pois está sendo ignorada, mas ela é executada (posso ver que está em execução olhando para a guia de rede). Ao fazer a renderização condicional do teste, pensei que a consulta não seria executada com certeza, pois o componente nem renderizava, mas estava sendo executado novamente, então acho que o problema é que a consulta está em execução entre o momento em que o cache é limpo e o ReactJS atualiza completamente o estado. Acho que não entendo alguns conceitos sobre estados. Como posso evitar que a consulta seja executada quando eu não quero? Agradeço sua ajuda.

Você pode ver aqui por si mesmo relitLink

Estou buscando os valores tsmin e tsmax da API GET. Defini um esquema zod com validação gte.

  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}`),
});

Agora quero aplicar a validação zod lte somente se tsmax > 0.

Não encontrei a melhor maneira de conseguir isso

Tenho o tailwindcss v4 para funcionar com outros aplicativos como um plugin vite no vite.config.tsarquivo.

Semelhante a isto:

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

Não tenho certeza se essa é a abordagem correta ao usar electron-vite, pois todas as abordagens que tentei não funcionam.

Minha electron-viteconstrução é

npm create @quick-start/electron@latest

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

Removi todos os arquivos /assetse adicionei um único global.cssque contém:

@import "tailwindcss";

Estou recebendo o erroCannot find module '@tailwindcss/vite' or its corresponding type declarations.

import tailwindcss from '@tailwindcss/vite'

Meu electron.vite.config.tsarquivo se parece com isso

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()]
  }
})

Já tentei usar um postcss.config.js. Mas na versão 4 deve ser tão fácil quanto o descrito no blog tailwindcss-v4 :

npm i tailwindcss @tailwindcss/postcss;

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

@import "tailwindcss";

Ainda não encontrei nenhuma documentação sobre isso. Alguém tem uma solução?

Estou tentando migrar meu projeto do React para o NextJS, e isso inclui o uso de contextos. Encapsulei os filhos no provedor de contexto no layout.tsxarquivo na rota que preciso (roteador de aplicativo). Mas quando tento consumir esse contexto em um dos componentes filhos, não funciona. Não está fazendo nada.

Já me certifiquei de que a criação do contexto, o componente filho e tudo mais são componentes do lado do cliente, mas ainda não funciona. Você poderia me ajudar com isso?

//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>
}

Aqui está o layout que usa o provedor de contexto para seus filhos:

"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