Develop Reference

React component with async array not updating [duplicate]

This question already has answers here:
Why am i getting and empty array when fetching an api with react hooks?
(4 answers)
Closed 13 days ago.
I have a component that gets an array of objects from a database using an async - await function. When the function gets the data and sets the array to a State variable, the component doesn't seem to update and I get errors about being unable to read properties. The data is being retrieved from the database correctly because I can console.log it. What am I doing wrong?
export default function LevelLeaderboard ({ level }) {
const [leaderboardData, setLeaderboardData] = useState([])
useEffect(()=>{
getLeaderBoardData(level)
.then((data)=>{
console.log(data)
setLeaderboardData(data)
})
},[level]);
return (
<div id="level" className="level-leaderboard">
<ul>
<li>{leaderboardData[0]['name']}</li>
</ul>
</div>
)
}
Error:
LevelLeaderboard.js:19 Uncaught TypeError: Cannot read properties of undefined (reading '0')
at LevelLeaderboard (LevelLeaderboard.js:19:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
Here's the async function:
export async function getLeaderBoardData(level, handleData){
const querySnapshot = await getDocs(collection(leaderboard, level));
let tempArr = [];
querySnapshot.forEach((doc) => {
tempArr.push(doc.data())
});
return tempArr;
}

You should add a conditional rendering to
<li>{leaderboardData[0]['name']}</li>
something like:
{leaderboardData.length >= 1 && <li>{leaderboardData[0]['name']}</li>}
since the array 'leaderboardData' its empty when component first render

how do i get rid of axios error uncaught (in promise)?

I am facing the error that uncaught(in promise) in console, its axios related error, I here pasted the code userSearch.jsx file code, where error showing at the end of function's last bracket ? at the end of function's last bracket, I am getting cross sign, why ? and what's the real error?
import { useState, useContext } from "react";
import GithubContext from "../../context/github/GithubContext";
import AlertContext from "../../context/alert/AlertContext";
import { searchUsers } from "../../context/github/GithubActions";
function UserSearch() {
const [text, setText] = useState('')
const { users, dispatch } = useContext(GithubContext)
const { setAlert } = useContext(AlertContext)
const handleChange = (e) => setText(e.target.value)
const handleSubmit = async (e) => {
e.preventDefault()
if (text === '') {
setAlert('Please enter something', 'error')
} else {
dispatch({ type: 'SET_LOADING' })
const users = await searchUsers(text)
dispatch({ type: 'GET_USERS', payload: users })
setText('')
}
}
return (
<div className='grid grid-cols-1 xl:grid-cols-2 lg:grid-cols-2 md:grid-cols-2 mb-8 gap-8'>
<div>
<form onSubmit={handleSubmit}>
<div className='form-control'>
<div className='relative'>
<input
type='text'
className='w-full pr-40 bg-gray-200 input input-lg text-black'
placeholder='Search'
value={text}
onChange={handleChange}
/>
<button
type='submit'
className='absolute top-0 right-0 rounded-l-none w-36 btn btn-lg'
>
Go
</button>
</div>
</div>
</form>
</div>
{users.length > 0 && (
<div>
<button
onClick={() => dispatch({ type: "CLEAR_USERS" })}
className='btn btn-ghost btn-lg'
>
Clear
</button>
</div>
)}
</div>
);
}
export default UserSearch;
ERROR SHOWING IN CONSOLE
GET https://api.github.com/search/users?q=brad 401
dispatchXhrRequest # xhr.js:220
xhrAdapter # xhr.js:16
dispatchRequest # dispatchRequest.js:58
request # Axios.js:109
Axios.<computed> # Axios.js:131
wrap # bind.js:9
searchUsers # GithubActions.js:16
handleSubmit # UserSearch.jsx:21
callCallback # react-dom.development.js:4164
invokeGuardedCallbackDev # react-dom.development.js:4213
invokeGuardedCallback # react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError # react-dom.development.js:4291
executeDispatch # react-dom.development.js:9041
processDispatchQueueItemsInOrder # react-dom.development.js:9073
processDispatchQueue # react-dom.development.js:9086
dispatchEventsForPlugins # react-dom.development.js:9097
(anonymous) # react-dom.development.js:9288
batchedUpdates$1 # react-dom.development.js:26140
batchedUpdates # react-dom.development.js:3991
dispatchEventForPluginEventSystem # react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay # react-dom.development.js:6465
dispatchEvent # react-dom.development.js:6457
dispatchDiscreteEvent # react-dom.development.js:6430
UserSearch.jsx:26 //ITS ERROR SHOWING BY THE END OF FUCNTION'S LAST BRACKET, ITS SHOWING CROSS SIGN ERROR AT THE END OF OF BRACKET
Uncaught (in promise) AxiosError {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
handleSubmit # UserSearch.jsx:26
await in handleSubmit (async)
callCallback # react-dom.development.js:4164
invokeGuardedCallbackDev # react-dom.development.js:4213
invokeGuardedCallback # react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError # react-dom.development.js:4291
executeDispatch # react-dom.development.js:9041
processDispatchQueueItemsInOrder # react-dom.development.js:9073
processDispatchQueue # react-dom.development.js:9086
dispatchEventsForPlugins # react-dom.development.js:9097
(anonymous) # react-dom.development.js:9288
batchedUpdates$1 # react-dom.development.js:26140
batchedUpdates # react-dom.development.js:3991
dispatchEventForPluginEventSystem # react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay # react-dom.development.js:6465
dispatchEvent # react-dom.development.js:6457
dispatchDiscreteEvent # react-dom.development.js:6430
GithubAction.js file where axios is added
import axios from 'axios'
const GITHUB_URL = process.env.REACT_APP_GITHUB_URL
const GITHUB_TOKEN = process.env.REACT_APP_GITHUB_TOKEN
const github = axios.create({
baseURL: GITHUB_URL,
headers: { Authorization: `token ${GITHUB_TOKEN}` },
})
// Get search results
export const searchUsers = async (text) => {
const params = new URLSearchParams({
q: text,
})
const response = await github.get(`/search/users?${params}`)
return response.data.items
}
// Get user and repos
export const getUserAndRepos = async (login) => {
const [user, repos] = await Promise.all([
github.get(`/users/${login}`),
github.get(`/users/${login}/repos`),
])
return { user: user.data, repos: repos.data }
}

The first line of your Error console GET https://api.github.com/search/users?q=brad 401 has the error code 401, which indicates the user is unauthorized, hence GitHub is rejecting your API request. Probably the token is incorrect or expired.
The second error related to Axios,
Uncaught (in promise) AxiosError {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
This happens because the API call to GitHub fails with a 401 error code and you have not implemented any error handling mechanism in your code to properly catch the errors and process them.
In UserSearch.jsx modify the handleSubmit function to use try-catch block
const handleSubmit = async (e) => {
e.preventDefault();
try {
if (text === "") {
setAlert("Please enter something", "error");
} else {
dispatch({ type: "SET_LOADING" });
const users = await searchUsers(text);
dispatch({ type: "GET_USERS", payload: users });
setText("");
}
} catch (error) {
console.log(error.response.data.error)
}
}

This happens because the API call to GitHub fails with a 401 error
code and you have not implemented any error handling mechanism in your
code to properly catch the errors and process theme.
I was facing same issue when I read this answer and I went back to check my code to realize that, while I was returning a value in
doSomething
.catch(error) { reject(false) }
I wasn't receiving it in the caller function's catch block as such
doSomethingCaller
.catch(error) { }
Once you write some error handling code, it stops displaying the error.

Amplify AppSync Subscription Uncaught (in promise)

I am trying to use AWS amplify GraphQL subscription like below,
import Amplify,{ API, Storage, graphqlOperation } from "aws-amplify";
import awsmobile from "../../aws-exports";
Amplify.configure(awsmobile);
...
const notiSubscription = API.graphql(graphqlOperation(onCreateNotification)).subscribe({
next: (todoData) => {
console.log(todoData);
},
});
...
onCreateNotification Graphql is,
subscription OnCreateNotification {
onCreateNotification {
id
}}
Below is the error I get,
AWSAppSyncProvider.ts:204 Uncaught (in promise) undefined
rejected # AWSAppSyncProvider.ts:204
Promise.then (async)
step # AWSAppSyncProvider.ts:204
(anonymous) # AWSAppSyncProvider.ts:204
push../node_modules/#aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js.__awaiter # AWSAppSyncProvider.ts:204
AWSAppSyncRealTimeProvider._startSubscriptionWithAWSAppSyncRealTime # AWSAppSyncRealTimeProvider.ts:227
(anonymous) # AWSAppSyncRealTimeProvider.ts:185
Subscription # Observable.js:197
subscribe # Observable.js:279
(anonymous) # PubSub.ts:171
...
Please help me out in this, also my config is
"aws_project_region": "us-east-1",
"aws_appsync_graphqlEndpoint": "https://xxx.appsync-api.us-east-1.amazonaws.com/graphql",
"aws_appsync_region": "us-east-1",
"aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
"aws_appsync_apiKey": "xxxx",

You need to intialize the subscription in a useEffect() hook and then unsubscribe from the subscription.
useEffect(() => {
const subscription = API.graphql(graphqlOperation(onCreateNotification))
.subscribe({
next: todoData => {
console.log(todoData);
}
})
return () => subscription.unsubscribe()
}, [])

I'm unable to import sqlite3 or knex-js in to electron react app

When I import sqlite3 to try and test my database connection I get an error, when I opened the development tools I found this stating:
Uncaught ReferenceError: require is not defined
at Object.path (external "path":1)
at __webpack_require__ (bootstrap:789)
at fn (bootstrap:100)
at Object../node_modules/sqlite3/lib/sqlite3.js (sqlite3.js:1)
at __webpack_require__ (bootstrap:789)
at fn (bootstrap:100)
at Object.<anonymous> (App.tsx:3)
at Object../src/App.tsx (App.tsx:22)
at __webpack_require__ (bootstrap:789)
at fn (bootstrap:100)
path # external "path":1
__webpack_require__ # bootstrap:789
fn # bootstrap:100
./node_modules/sqlite3/lib/sqlite3.js # sqlite3.js:1
__webpack_require__ # bootstrap:789
fn # bootstrap:100
(anonymous) # App.tsx:3
./src/App.tsx # App.tsx:22
__webpack_require__ # bootstrap:789
fn # bootstrap:100
./src/renderer.tsx # renderer.tsx:4
__webpack_require__ # bootstrap:789
fn # bootstrap:100
0 # renderer.tsx:6
__webpack_require__ # bootstrap:789
(anonymous) # bootstrap:856
(anonymous)
and this is the code I wrote:
import { hot } from "react-hot-loader";
import React, { useEffect } from "react";
import sqlite3 from "sqlite3";
const App = () => {
useEffect(() => {
let db = new sqlite3.Database("./database.sqlite", (err: any) => {
if (err) {
return console.error(err.message);
}
console.log("Connected to database");
});
});
return (
<div>
<h1>Testing</h1>
<h2>sdfsdfs </h2>
</div>
);
};
export default hot(module)(App);
I'm using Electron, React, Typescript

Do not connect sqlite directly with React components. Make the application core separate and connect with the frontend using Electron IPC.

Unable to use web3.eth.accounts.wallet.encrypt

I am trying to create a metamask like a wallet using web3. I am using React for the front end.
I am able to create a wallet but I am getting an error for encrypt function.
Following is the code I am using inside a React Component:-
handleClick = async (event) => {
try {
event.preventDefault();
const web3 = new Web3();
const account = web3.eth.accounts.create();
console.log(account);
const wallet = web3.eth.accounts.wallet.create();
wallet.defaultKeyName = this.state.accountName;
wallet.add(account.privateKey);
console.log(wallet);
const encryptedWallet = web3.eth.accounts.wallet.encrypt(this.state.password);
console.log(encryptedWallet);
}
catch (error) {
console.log(error);
}
}
Following is the error:-
TypeError: "list" argument must be an Array of Buffers
at Function.concat (index.js:399)
at Accounts.push../node_modules/web3-eth-accounts/src/index.js.Accounts.encrypt (index.js:431)
at Object.encrypt (index.js:111)
at index.js:548
at Array.map (<anonymous>)
at Wallet.push../node_modules/web3-eth-accounts/src/index.js.Wallet.encrypt (index.js:547)
at CreateWallet.handleClick (CreateWallet.js:46)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:414)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at forEachAccumulated (react-dom.development.js:3259)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21871)
at batchedEventUpdates (react-dom.development.js:795)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at discreteUpdates$1 (react-dom.development.js:21887)
at discreteUpdates (react-dom.development.js:806)
at dispatchDiscreteEvent (react-dom.development.js:4168)
Complete code is available at https://github.com/samarth9201/crypto-wallet.git.
I don't know if I am using it the incorrect way.