please help;
I've got an error "undefined is not an object (evaluating 'this.props.client')
class FeedProfileBottom extends Component {
_onLogoutPress = function() {
this.props.client.resetStore();
return this.props.logout();
}
render() {
return (
<Root>
<LogOutButton onPress={this._onLogoutPress}>
<LogOutText>
Logout
</LogOutText>
</LogOutButton>
</Root>
);
}
}
export default withApollo(connect(undefined, { logout })(FeedProfileBottom));
You might need to explicitly bind the scope of your component to your function.
class FeedProfileBottom extends Component {
constructor (props) {
super(props);
this._onLogoutPress = this._onLogoutPress.bind(this);
}
// ...
Related
hi everyone i am recently learning react native and i have a synchronization problem sending data from one screen to another screen.
I have the parent page (UserList) that wants to send its status to the child page (RecyclerViewPage) but the render is called before the data is available.
export default class UserList extends Component {
constructor(props){
super(props);
this.state={
comment_state: [],
datetime: []
}
}
//getPost is a network call which gets and store the result in the state of the class
async getPost(){
var sid=this.props.route.params.value_sid
var did=this.props.route.params.value_did
const utils=new Utils();
const responseJson = await utils.getPost(sid,did)
const comment = (responseJson?.posts ?? []).map((data) => data.comment)
this.setState({comment_state:comment})
console.log("now i change state with new value")
}
componentDidMount(){
this.getPost()
}
render(){
return(
<RecyclerViewPage
comment={this.state.comment_state}
/>
)
}
}
and RecyclerViewPage code:
export default class RecyclerViewPage extends Component {
constructor(props) {
super(props);
console.log("i am in recyclerviewPage : ",this.props.comment)
}
render(){}
}
I tried to put some logs and the result is:
Log: "i am in recyclerviewPage: []"
Log: "now i change state with new value"
It appears as if render () was called before the asynchronous getPost method has finished. how can i synchronize my code in order to get the data first and then send it to the RecyclerViewPage daughter schemata?
See you can wait for the results and then show recyclerviewpage:
You can add a loader state while its being fetched:)
Hope it helps. feel free for doubts
export default class UserList extends Component {
constructor(props){
super(props);
this.state={
comment_state: [],
datetime: []
}
}
//getPost is a network call which gets and store the result in the state of the class
async getPost(){
var sid=this.props.route.params.value_sid
var did=this.props.route.params.value_did
const utils=new Utils();
const responseJson = await utils.getPost(sid,did)
const comment = (responseJson?.posts ?? []).map((data) => data.comment)
this.setState({comment_state:comment})
console.log("now i change state with new value")
}
componentDidMount(){
this.getPost()
}
render(){
return(
{!!comment_state && <RecyclerViewPage
comment={this.state.comment_state}
/> }
{!comment_state && <Text> Please wait its loading </Text>}
)
}
}
I am currently switching to navigation 5.x from 4.x. I'm using
import { NavigationInjectedProps } from 'react-navigation'
across the entire application, but I cannot find anything equivalent in navigation 5. I'm using typescript.
Could anyone lead me in the right direction?
First of all, the logic behind obtaining params is changed. In v5, you have to access them from a route, which is passed as an additional property for class components, unlike using navigation in the previous versions.
To type your params in the right way, you have to type the route. For previously written code:
import { NavigationInjectedProps } from 'react-navigation'
type Params = {
param1: string
}
type Props = NavigationInjectedProps<Params>
class MyComponent extends Component<Props> {
render() {
const { param1 } = this.props.navigation.state.params
}
}
the rough equivalent will be:
import { StackScreenProps } from '#react-navigation/stack'
type RootParamsList = {
MyComponent: {
param1: string
}
}
type Props = StackScreenProps<RootParamsList, 'MyComponent'>
class MyComponent extends Component<Props> {
render() {
const { param1 } = this.props.route.params.param1
return null
}
}
I'm new on React-Native and it's my first React-Native app. However, I have already some problems.
I want to pass a variable from one class (Home.js) to an another. (Is it possible without using the composent in the render() fonction ?)
##### Home.js #####
class Home extends Component {
constructor(props) {
super(props);
this.state = {direction: "defaultvalue"};
}
getCurrentDirection() {
return this.state.direction;
}
render() {
/***..... some elements ..*/
}
}
export default Home
And
#### Two.js ####
import Home from './Home'
/** SOME CODE **/
const DrawerOptions = {
initialRouteName: Home.getCurrentDirection(),
contentComponent: CustomDrawerContentComponent,
drawerWidth: 300,
};
However it doesn't work... How to resolve it ? I have already try some solutions as declare the getCurrentDirection as static but nothing.
In addition, it seems to be a specific case because DrawerOptions is not a class. Could you please, add to your response also, how make it if I want to obtain the variable into the class Two.js ?
I meant if Two.js was for example :
##### Two.js #####
class Two extends Component {
var myvariable = Home.getCurrentDirection();
render() {
/***..... some elements ..*/
}
}
Thanks a lot in advance
A recommendable way of accessing the state from a component into another is to use (in this case) the Home component as a parent of Two component. This way you don't have to trigger a function to access the Home's state. On each time when the state of the parent (in this case) component will be updated, the Two component will receive the updated property (direction). If you want to call a function from Two component, you have to pass it a function as a property (changeCurrentDirection) that will call back the function you want to trigger from Home component.
So you would have something like this:
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
direction: "defaultValue"
};
}
changeCurrentDirection() {
this.setState({
direction: "valueChanged"
})
}
render() {
let state = this.state;
return (
<Two
direction={state.direction}
changeCurrentDirection={() => this.changeCurrentDirection.bind(this)}/>
)
}
}
class Two extends React.Component {
render() {
let props = this.props;
return (
<div>
<h3>{props.direction}</h3>
<button onClick={props.changeCurrentDirection()}>Change value</button>
</div>
)
}
}
React.render(<Home/> , document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="app"></div>
Additional info you can find here.
Also, if you want to have a good management of the state of your components, my advice for you is to use redux. Using this library you can easily connect the component's actions and properties that can further be accessible from other files where you can manage them.
I have ChooseLevel component which has many buttons. Once I click a button onLevelSelected function is being called and it call action creator which will return an action type, moreover it will redirect me to qPage component. In qPage component I make some calculation and I put the result in total variable.
Here's my code:
ChooseLevel.js
class ChooseLevel extends Component {
constructor(props) {
super(props);
}
onLevelSelected(levelNumber) {
this.props.levelSelected(levelNumber);
}
render(){
<Button key={1} onPress={this.onLevelSelected.bind(this, 1)}>
<Button key={2} onPress={this.onLevelSelected.bind(this, 2)}>
<Button key={3} onPress={this.onLevelSelected.bind(this, 3)}>
....
}
}
My action creator looks like this:
import { Actions } from 'react-native-router-flux';
export const levelSelected = (levelNumber) => {
return (dispatch) => {
dispatch({
type: 'level_selected',
payload: levelNumber
});
Actions.qPage(); // redirects me to qPage component
};
};
qPage.js
class qPage extends Component {
constructor(props){
...
}
calc(){
.... some calculation
total = result of previous calculation
}
render(){
....
....
}
}
How do I pass total variable from qPage to ChooseLevel page?
What you need to do is, i will go step by step:
1) create one more action and pass calculated value inside that action.
2) access that calculated value through props(reducer)
3) You can use componentWillUpdateProp(nextprops), Inside this fuction assign this new prop to the state of the class.
Cheers :)
Anyone can help me fix this error when using code modal sample in link https://facebook.github.io/react-native/docs/modal.html I can't understand why this error appear although i coded absolutely same code sample.
Use ES6 class. Constructor will work only on ES6 class.
class ModalExample extends React.Component {
constructor () {
super(props)
}
render () {
// code
}
}
If you don't want to use ES6 class, then use getInitialState to set the state.
var ModalExample = React.createClass ({
getInitialState: function() {
return {
modalVisible: false
}
}
})