Im really new to react and react-native and having problem with this really simple code below.
The code below is on a minimal react native app.
It renders the content inside the render method but looks dont executing the instructions inside the constructor, i havent the alert box neither the log appears in console.
I need ensure a variable is initialized just on application startup and it was my way to check it, im thinking about use a logic using Undefined and give up on using contructor.
Some related links i found:
constructor in React not being called upon component being instantiated
Console.Log Not Being Called Inside React Constructor
My code :
class TestComponent extends Component {
Constructor(props){
this.super(props);
console.log("CalingConstructorLog"); // do nothing
Alert.alert("CalingConstructorLog"); // do nothing
}
render() {
return (
<Text>It renders OK!</Text>
);
}
}
export default TestComponent;
Related
I am working on a library which requires exporting a couple of functions for users to call upon. Those functions need access to component ref in order to add/remove classNames and auto scroll etc.
I was able to get it to work by moving my ref (created by React.createRef) outside of the component itself (NOT talking about defining it outside of the constructor but inside the component)
Here's how my code looks like (used a class component instead of functional as the hook useRef obviously can't be used outside)
import React, { PureComponent, createRef } from "react";
import { typingEffect } from "../redux/actions/dispatch";
import { containerRef } from "./Container";
let typingRef = createRef();
export async function displayTypingEffect() {
await typingEffect();
typingRef.current.className += " rcb-is-typing";
containerRef.current.scrollTop = containerRef.current.scrollHeight + 700;
}
export function hideTypingEffect() {
typingRef.current.className = "rcb-typing-container";
containerRef.current.scrollTop = containerRef.current.scrollHeight + 700;
}
export default class Typing extends PureComponent {
render() {
return (
<div ref={typingRef}>
rest of the component code which is unnecessary for this question
</div>
)
}
I am just wondering if there's a possibility of any unforeseen issues or bugs if I follow this pattern.
Thank you.
This makes the typingRef
a global variable (inside the module), and
be created outside of any React life cycles
typingRef will be the same object for every instance of the Typing component, i.e. if two components are created from the Typing class, both will write to the same typingRef. Your API will provide access some DOM element, but you can not be sure which one it currently is.
typingRef is created as soon as the file is imported, before React even starts, and will live for the life time of the Javascript code, not the life time of any React component.
I think (not 100% sure) any DOM elements referenced by typingRef will be kept (at least) until typingRef gets overwritten (or the Javascript execution is ended). So if a Typing component gets unmounted, the DOM element (and everything that's connected to it) is still kept in memory. So your API will provide access to "useless" DOM elements.
I have a plain class (meaning it doesn't extend from React.Component), and I want to go to a new route):
class CalculatorService {
constructor() {
}
sum(a, b){ return a+b; }
minus(a, b){ return a-b; }
goSomeWhere(){ GO TO HOME PAGE. What do I put here? }
}
export default CalculatorService;
Of course I import this class into React components and use its functions from there, and when I execute goSomeWhere it should go to a different page, even though this class is a logic class and has nothing to do with React.
My solutions so far is to use a library called react-navigation to no avail because I didn't understand it. I also tried passing a function into the constructor so it could call some Component's method where navigation is possible. But none of these worked.
The idea isn't to call the route change within the CalculatorService class but getting the callback or return response from the class to be notified of the moment when you would like to change the route (of course you don't necessarily have to be 'notified' if all your codes are synchronous) and making the route change in the React component.
As to programmatically changing the route, do refer to my another answer Stateless component React router
I am building a single page application using React JS, and following the Flux flow.
I have a problem where I want to export an instance of a class (an action class), import elsewhere, and then reference some of the class methods. I can import the class with no error, but when the class' methods are referenced it throws a "TypeError: undefined is not an object".
A console.log() confirms that that class is undefined, however I also import the action in another file. So I decided to console log it's reference to the action class and log where the export is happening.
What I found is that the first reference is still undefined, but before the second reference is called, the export happens and the second console.log() returns the object and it's methods.
So my question is, does javascript deal with exports as it comes across them, or does it do all the exports first?
Example of the code:
class Action {
methodOne(){ ..... }
methodTwo(){ ..... }
}
const instance = new Action();
export default instance;
The action is then imported as:
import Action from '../actions/Action';
in the two files.
I have checked and double checked spelling and import paths which all seem to be correct. Some research does say that it could be something to do with circular references, though that doesn't seem to be obvious to me (not discounting it though).
I'm all out of ideas as to where the problem is.
Yesterday, I was reading the React documentation on higher order components and I was trying to use some of the examples that they have. But, for me, it isn't working.
Here is a simple HOC I created just to wrap another component and see how this works. But since the very beginning, it never worked.
import React, { Component } from 'react';
export default function (enhacedComponent) {
class Authenticate extends Component {
constructor(props) {
super(props);
}
render() {
return <enhacedComponent {...this.props} />;
}
}
return Authenticate;
}
It always returns me this error:
Warning: Unknown props `location`, `params`, `route`, `router`, `routeParams`, `routes` on <enhacedComponent> tag. Remove these props from the element.
When I check the HTML elements part in the console, I find that the actual value this HOC returns is <enhacedComponent></enhacedComponent>. So the wrapped component never got out!
So, in the end, the wrapped component never returns. Just a JSX version of what should be the argument of the HOC.
I think that since JSX is just a another syntax and the unique way to pass plain JavaScript is using {}, I tried to do this, to no success:
<{enhancedComponent} {...this.props }/>
I really don't know what to do or what I am doing wrong.
I'm using this HOC reference. I'm using Webpack 2 with webpack-dev-server as tools on Windows 10.
React thinks you're trying to pass these props to a DOM element and not a react component, which will give you the unknown props error. React interprets lower camel case as a DOM element, so enhacedComponent should be EnhacedComponent.
More info here:
https://facebook.github.io/react/warnings/unknown-prop.html
First, some context.
I'm using Redux to manage authentication state of my app and have Auth as a Redux container (or smart component).
I've created a wrapper (a higher-order component) that takes Auth and returns it:
export default function AuthWrapper(WrappedComponent) {
class Auth extends Component {
... <Auth stuff here> ...
}
return connect(mapStateToProps, mapDispatchToProps)(Auth);
}
It seems to me that in order to use the wrapper, I just need to invoke it with a component I want to have behind my auth. For example, let's say I'm authenticating a component called UserPage with the wrapper, à la:
const AuthenticatedUserPage = AuthWappper(UserPage)
However, when I use the wrapper like this, React isn't happy with me. I get the following error:
Warning: AuthenticatedApp(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
My best guess is that it doesn't like the connect-ified component that Redux will create when I return it from AuthWrapper... which leads me to my question:
Does React support higher-order components when those components create Redux containers? And if so, why would React be throwing this error?
Here's my two cents. I think the error is occurring elsewhere.
According to this simplified version of the connect function in react-redux, the connect function is simply returning another react component. So in your case, you're returning a component, wrapped inside another component, which is still valid. A container is basically a component.
Read https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e for a better understanding of the connect function.
I also tried the following in my own application and it worked.
import Layout from '../components/Layout'
//Do some other imports and stuff
function wrapper(Layout) {
return connect(null, mapDispatchToProps)(Layout);
}
export default wrapper()
Like the error states, you might just simply be returning an invalid component somewhere in your app. Your app might be throwing the error because you're not wrapping a return call in parentheses on your render method.