Blazor's JavaScript Interop Functionality Fails to Retrieve Data

I'm facing an issue with a Javascript function that is supposed to return a string. Despite confirming that the JS function does return a string, the corresponding C# part always ends up null.

Below is the snippet of the Javascript function:

window.get_current_user = () => {
        Moralis.User.currentAsync().then(function (user) {
            var wallet = user.get('ethAddress');
            return wallet;
        });
    }

This is how the C# code calls it:

 private async void GetAddress()
 {
    var userAddress = await _js.InvokeAsync<string>("get_current_user");
    _js.InvokeVoidAsync("alert", userAddress);
 }

Despite using Chrome Dev Console dev tools to verify that the correct value is being returned by the JavaScript function as a string, https://i.sstatic.net/tlTMR.png.

To further investigate, I placed a breakpoint on the 4th line of the GetAddress function and noticed that the value of 'userAddress' is, in fact, null. https://i.sstatic.net/jyqly.png.

javascriptc#blazorblazor-webassemblymoralis

Answer №1

To achieve the desired outcome, remember to move the return statement outside of the second function in the code snippet below:

const fetchCurrentUserWallet = () => {
    let wallet = null;
    
    Moralis.User.currentAsync().then(function (user) {
        wallet = user.get('ethAddress');
    });

    return wallet;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show the ajax response on a separate page

I am looking to showcase the output of an ajax request on a separate page rather than the page where the ajax call originated. The scenario is that I have a membership directory page, and when a user clicks on a member ID cell, an ajax call sends the ID to ...

javascriptjqueryajax

ReactJS: Error message indicating that the update depth limit has been exceeded

I'm facing an issue with toggling the state of a component in ReactJS. The error message I am receiving says: Maximum update depth exceeded. This can occur when a component repeatedly calls setState within componentWillUpdate or componentDidUpdate. ...

javascriptreactjsreact-native

Decode the string containing indices inside square brackets and transform it into a JSON array

I have a collection of strings that contain numbers in brackets like "[4]Motherboard, [25]RAM". Is there a way to convert this string into a JSON array while preserving both the IDs and values? The desired output should look like: {"data":[ {"id":"4","i ...

javascriptjsonsplit

Different ways to trigger events with the press of a single button

Is there a way to send an event to the backend where 'isVerified' can be true or false based on the last condition, with only one button form available? <form onSubmit={(ev) => this.submit(ev, 'isVerified')}> ...

javascriptnode.jsreactjsdebuggingmaterial-ui

The chosen index in the Material Stepper feature is experiencing a malfunction

I've been busy working on a Mat-Stepper, actually two of them. I have a component that contains two ng-templates set up like this: Question: Why is my selected index not functioning as expected? Am I missing something? I know you can define [selected ...

javascriptangulartypescriptangular-material

Utilizing React Developer Tools to easily click a button

Currently, I am working on building a card in React with Material UI. Here is the layout: https://i.sstatic.net/CFS58.png The button labeled Sign out has the functionality to change its state from true to false using React developer tools. However, I am ...

javascripthtmlreactjsmaterial-ui

Mastering Number Formatting in VueJS

While working with VueJS, I encountered difficulties in formatting numbers the way I wanted. After exploring options like the builtin currency filter and vue-numeric, I realized they required modifications to achieve the desired look. Furthermore, these so ...

javascriptvue.jsvuejs2

What are some strategies for breaking down large components in React?

Picture yourself working on a complex component, with multiple methods to handle a specific task. As you continue developing this component, you may consider refactoring it by breaking it down into smaller parts, resembling molecules composed of atoms (it ...

javascriptreactjsreact-native

What is an optional section of the URL in ExpressJS that is not a parameter?

Here is my route example: /items/123/details/456. I am trying to create a route where the sub resource is optional, so that it can handle both /items/123 and /items/123/details/456. However, this attempt does not work: /items/:id/details?/:subid?. How c ...

javascriptnode.jsexpress

Ways to position cursor at the end in the Froala Editor

My current dilemma involves the need to position the focus/cursor at the end of text that is loaded within the Froala editor. I attempted to accomplish this using the focus event of Froala (events.focus), but unfortunately, it did not yield the desired out ...

javascriptjquerycursoreditorfroala

Using select2, items can be automatically selected for an ajax call

Is it possible to configure a select2 control to automatically select an item when the ajax response contains extra data? I am looking to set up my controller to mark an item as an exact match in the JsonResult and have the select2 control automatically s ...

javascriptajaxjquery-select2jquery-select2-4

The post request with Postman is functional, however the AJAX post request is not working. I have thoroughly reviewed the client-side JavaScript

I encountered a problem with an endpoint designed to create an item in my application. Sending a POST request through Postman works perfectly fine, as I am using Node.js and Express for the backend: router.post("/", jwtAuth, (req, res) => { console.lo ...

javascriptnode.jsajaxexpressclient-side

In Vue js, where is the best place to incorporate something similar to a 'base.html' template?

My transition from a Flask backend without a front end framework to Vue.js (with no chosen backend yet) has me considering how to structure my project. Previously, I would create a 'base.html' file that contained all the necessary HTML code, depe ...

javascriptvue.jsvuejs2

What are the strategies for finding elements within multiple layers of shadow DOM?

I am struggling to find the Xpath or CSS Selector for the JSON download button on this particular page. Although I attempted to copy the selector using Chrome browser, it doesn't seem to locate the button when I try to find it using control find. Xp ...

javascriptpythonhtmlselenium-webdriverfrontend

Guide to displaying a loading image when selecting an item from a dropdown menu using JavaScript

When using three drop-down lists and performing an AJAX call on each dropdown list's onclick function, I encountered a delay in loading the data. To address this issue, I attempted to display a loading image while processing the AJAX call. <form ...

javascriptphpjqueryhtmlajax

Autofill functions may not be compatible with input fields generated using JavaScript

Having trouble with browsers not using autocomplete in login overlays generated with JavaScript? It can be really annoying. Any suggestions on how to fix this issue? Should I create a hidden form within the original HTML and then move it into the overlay? ...

javascripthtmlcss

Defining ReactNode as a prop in a TypeScript React component: A comprehensive guide

Is there a way to create a React component in TypeScript that accepts another React component as a prop? I am attempting to write the following code: const MyComponent = () => ( <span>Hello</span> ); // when trying this, I get an error m ...

javascriptreactjstypescriptreact-props

Attempting to modify information in vue.js

I have been facing an issue with overriding data in the App.vue component. It seems that every time I try to update the data in my main.js file, the component still takes the default data. I am working with webpack as well. App.vue <template> & ...

javascriptjquerywebpackvue.js

increasing the size of an element while keeping its overflow hidden

Is it possible to expand an element with "overflow: hidden" when clicked without affecting other elements? I'm looking for a solution that allows the expanded element to overlap and hide the element below it, rather than pushing it down. I've tr ...

javascripthtmlcssoverflow

Observing the Angular 6 click bindings within the developer console during development mode?

Imagine I have a button with the following attributes: <button> class="button" (click)="doStuff()" [ngClass]="{'stuff': selected}"> Click here </button> While running my app in development mode, if I check the brow ...

javascripthtmlangulardomangular6