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
Estou anexando abaixo o erro que está aparecendo no meu terminal do Visual Studio Code. Estou tentando executar o aplicativo localmente através da janela do Visual Studio Code.
npm : O arquivo C:\Program Files\nodejs\npm.ps1 não pode ser carregado. O arquivo C:\Program Files\nodejs\npm.ps1 não está assinado digitalmente. Você não pode executar este script no sistema atual. Para obter mais informações sobre a execução de scripts e a configuração da política de execução, consulte about_Execution_Policies em https://go.microsoft.com/fwlink/?LinkID=135170. Na linha:1 char:1
- npm executar dev
-
+ CategoryInfo : SecurityError: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess
Instalei a versão mais recente do node.js e também atualizei a variável de ambiente para o caminho do node.js, mas o erro permanece o mesmo no console local/janela do terminal do Visual Studio.
Estou tentando compor meu próprio componente Combobox usando Shadcn ui. Ao fazer isso, estou usando o componente Command .
Estou tentando vincular meu valor de entrada de comando ao estado do React no componente cliente Next.js assim:
const [customerQuery, setCustomerQuery] = useState("");
return <CommandInput
placeholder="[email protected]"
value={customerQuery}
onChange={(e: any) => setCustomerQuery(e.target.value)}
spellCheck={false}
/>
Na verdade, recebo um erro de tipo no onChangemanipulador:
Type '{ placeholder: string; value: string; onChange: (e: any) => void; spellCheck: false; }' is not assignable to type 'IntrinsicAttributes & Omit<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; } & { ...; }, "key" | ... 1 more ... | keyof InputHTMLAttributes<...>>, "type" | ... 1 more ... | "onChange"> & { ...; } & RefAttributes<...>'.
Property 'onChange' does not exist on type 'IntrinsicAttributes & Omit<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; } & { ...; }, "key" | ... 1 more ... | keyof InputHTMLAttributes<...>>, "type" | ... 1 more ... | "onChange"> & { ...; } & RefAttributes<...>'. ts(2322)
Isso seria bom de consertar. Mas um problema maior é que ao digitar no campo de entrada nada acontece, nenhum texto aparece, nada. Vincular assim funciona para uma entrada regular, mas não parece funcionar na entrada do cmdk. Não recebo erros no console. As ferramentas de desenvolvimento do React não mostram nenhuma atualização no computador. Não vejo nenhum problema relacionado no Github do cmdk.
Se ajudar, aqui está o que o React devtools mostra:
Como posso consertar isso?
Depois de procurar respostas sobre como baixar arquivos com o Axios no React, implementei o seguinte código:
const [fileName, setFileName] = useState("")
const [extension, setExtension] = useState("")
const downloadFile = useCallback(async (path) => {
Axios.get(
`http://localhost:8080/api${path}`,
{ responseType: 'blob' })
.then(res => {
let headers = res.headers['content-disposition']
let fileName = headers.split('filename=')[1].split('.')[0]
let extension = headers.split('.')[1].split(';')[0]
setFileName(fileName)
setExtension(extension)
return res.data
})
.then(blob => {
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
const fullFileName = fileName + "." + extension
link.href = url
link.download = fullFileName;
document.body.appendChild(link)
link.click()
link.remove()
URL.revokeObjectURL(url)
})
.catch(err => console.log(err))
},
[]
)
Eu estava procurando definir o nome do arquivo e a extensão em a useStateno primeiro .then()e então usá-lo para nomear o arquivo baixado com seu nome original. No entanto, eu vim a ver que ele simplesmente não executa os setters antes da próxima .then()chamada, então as variáveis fileNamee extensionainda são strings vazias até então, e ele dá a ele um nome padrão por causa disso. Como eu poderia fazer com que ele passasse os valores corretos para a próxima função na cadeia?