From a third party I have to add a function to the window object:
In my React child component I added it like:
useEffect(() => {
window.functionFromThirdParty();
}, [id]);
But then I get this error:
Uncaught TypeError: window.functionFromThirdParty is not a function
How to fix this issue?
Make sure that the function is actually being added to the window object by the third party code. You can check this by running console.log(window) in the browser's developer console and seeing if the function is listed.
It is either related to third party conflict, or you did not import that function properly, could you try to give us more info and specifically where you imported it into window object.
This question already has answers here:
React Hook "useEffect" is called conditionally
(6 answers)
Closed 5 months ago.
I'm trying to make an event menager in React and I have a problem with one feature:
There is an Apply button in a pop up dialog window (DialogWindow.js) component:
<Button
onClick={()=>{
const temp = makeAnEvent() //function gaining all dialog inputs into one object
localStorage.setItem("Event_"+temp.key, JSON.stringify(temp))
handleClose() //function closing a dialog
clearDialog() // fucntion clearing inputs
}}
>
Apply
</Button>
And here is a state and a function I use in a Parent (App.js) component:
const [events,setEvents] = useState(Object.values(localStorage))
const updateEvents = () => {
setEvents(Object.values(localStorage))
console.log("Events Updated!")
}
Also I have a component MakeAnEventHMTML(object) building an html from given event object. I use it within the App.js to view all events:
{events.map((element)=>(MakeAnEventHTML(JSON.parse(element))))}
When I hit the Apply button, all the content in my browser vanishes and I get this stack of errors in a console:
1 : React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks
2: Uncaught Error: Rendered more hooks than during the previous render
3: The above error occurred in the component
4: Uncaught Error: Rendered more hooks than during the previous render
You likely need to bring the useState instantiation higher up in the component. If you have conditional render statements above it, this error will occur.
What I want to do: I want to use a state value in one of my action methods.
How I would prefer to do it: Instead of typing out state.sale.oliver.data, I want to obfuscate that by calling my selector, showingTest(state).
Problem: Inside my if statement, the value is undefined, and when I use the browser to log the method name. I get an uncaught reference error.
At the top of my actions.js (which is in the same directory as selectors.js)
actions.js
import { showingTest } from './selectors';
In the same file I have a method and inside the method have the following if statement:
if (showingTest(state).length >= 3)
My code will never go into this if statement,
but if I type
if (state.sale.oliver.data.length >= 3)
then bingo we are working.
Also for reference we have here my selector:
selectors.js
export const showingTest = state => {
return state.sale.oliver.data ? state.sale.oliver.data : "";
}
Ahhh, so here was the issue. I was facing a bug and thinking that my first if statement wasnt working. I was debugging on google chrome and typed that method into the console and there was an uncaught reference error, but when I console.log the value I am indeed accessing the selector.
So, I am starting to use React-Google-Login to create a sign in button, I pretty much followed the documentation, but I am receiving 2 errors.
So, here is my code for now.
import GoogleLogin from 'react-google-login';
const Login = ({ classes }) => {
const onSuccess = (googleUser) => {
console.log(googleUser);
}
return <GoogleLogin clientId="MYTOKEN.apps.googleusercontent.com" onSuccess={onSuccess} isSignedIn={true} />;
};
As soon my component renders, I receive this error
Uncaught TypeError: g is not a function
at google-login.js:274
but I am still able to see to button, and when I click it I receive this error when it finishes the action
Uncaught TypeError: i is not a function
at google-login.js:312
So what are this errors about ? I am sure my token is right, and pretty much sure the configuration on google console is right as well.
How to solve it ?
The problem is not well documented pretty much anywhere in the official documentation and I am not really sure this is the best approach for the problem, since many people haven't the same problem when following the documentation.
My solution was adding a callback error on the component itself:
<GoogleLogin clientId="MYTOKEN.apps.googleusercontent.com" onSuccess={onSuccess} onFailure={err => console.log('fail', err)} isSignedIn={true} />;
For me the problem was solved by enabling cookies. It seems that the GoogleLogin component requires cookies to function and that my chrome browser had been blocking it's attempts to access them.
I set up a new react project and for some reason, the componentDidMount method is not being called.
I have verified this behavior by placing a call to console.log in componentDidMount but I cannot see its output in the console.
Furthermore, this.setState() is not working.
I'm pretty stumped as to why the componentDidMount is not being called. I tried using both React "v0.14.0" and "v0.14.3".
Why is 'componentDidMount' not being called?
Code:
var React = require('react');
var RecipePage = React.createClass({
componentDidMount: function() {
console.log('mounted!');
},
render: function() {
return (
<div>Random Page</div>
);
}
});
module.exports = RecipePage;
This happened to me when I had componentWillMount() defined 2x in the same class. This did not produce a runtime error. I simply removed the second definition and things started working.
So... lo and behold.... I finally got it working(with the help of a back-end expert). The reason why the "componentDidMount" methods weren't firing was because my server was bundling and serving all the react + html stuff on server side. (Only "render" and "getInitialState" methods get called to create the "html" template that gets delivered through the client's browser...but it stops there because it thinks it's finished)
The fix: Find a way to deliver the resulting "compiled" html through the server AND in addition, allow react's own events to be accessible and "fireable" again on the client side. When compiling my "view" file( index.js or index.html ), I included an "Application.start()" script that injects my bundle.js code into the template again. Then in my gulpfile, exported the "Application" variable so the "view" file can access it.
Gahh...pulled my hair out for this. Time to read up on server side vs. client side rendering
In my case, there was another componentDidMount earlier in the code
I have the create-react-app template. I added the ComponentDidMount into the App Component. I put a console.log and an alert into it. It does not fire and there are no errors in React or the browser. I tried in chrome and firefox.
FIX: what worked for me was rebooting my pc. Then it started working. I do not know why, but this resolve the issue.
Update: Not I have an uppercase 'C' it is 'componentDidMount' not 'ComponentDidMount'.. I think it's time for sleep.
In my case, I call componentDidMount() for retrieving data from a service (API call) and on the render function I have components that are supposed to use the data that is returned from this call.
But because the call is Async the render() function is called immediately and then it crashes (many errors like: "TypeError:cannot read property 'XXXX' of undefined" ) then it looks like componentDidMount is not called at all.
To solve this issue I check on render that myData !== null before returning the component itself - You can use generic loader\spinner on this case that will not render internal components that use data before the data that actually retrieve from service.
Example:
componentDidMount() {
const { GetMyDataFromServiceFunc } = this.props;
GetMyDataFromServiceFunc ("150288");
}
render() {
const { details, loading } = this.props;
if (!details)
return (<GenericLoader />);
return (
<FullScreenModal
<Wizard className="order-new-wizard">
<Component1 editable={false} dataToComponent1={details}
goNextStep={this.goNextStep} />
<Component2 values={details.customerDetail} goNextStep={this.goNextStep} />
</Wizard>
</FullScreenModal>
);
}
}
You need to change your module.exports to point at RecipePage not TestPage
module.exports = RecipePage;
For me, the reason was upper case "C" in ComponentDidMount.
Changed it to componentDidMount and it worked
For me I also declared componentDidUpdate in the class after that componentDidMount started firing as expected.
Although you have a console log statement in your componentDidMount function it may not be executing because that function never gets run. If the error occurs before componentDidMount gets called such as in your render function, you won't see the console log. Try commenting out the code in your render function and see if it appears.
In my case, I imported a component without the export default command in the imported file. When I fixed this, componentDidMount started firing...
For me, I had onComponentDidMount() instead of componentDidMount() facepalm
componentDidMount did not fire for me because I mistakenly called it twice. Also, it will not show any console error. Removing one of them worked perfectly.