I'm trying to create variables and a function inside a state like this
state = {
modalVisible: false,
photo:""
getDataSourceState
}
which i have done, how can i call the function outside the state and set a new state.
This what i have done but i keep getting errors
getDataSourceState() {
return {
dataSource: this.ds.cloneWithRows(this.images),
};
}
this.setState(this.getDataSourceState());
see what prompted me to ask the question, because i was finding it difficult to access modalVisible in the state since there is a this.state = this.getDataSource()
constructor(props) {
super(props);
this.state = {
modalVisible: false,
photo:"",
sourceState: getDataSourceState()
}
this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.lastPhotoFetched = undefined;
this.images = [];
this.fetchPhotos();
this.getDataSourceState = this.getDataSourceState.bind(this)
}
componentDidMount(){
this.getDataSourceState();
}
getDataSourceState() {
return {
dataSource: this.ds.cloneWithRows(this.images),
};
}
getPhotosFromCameraRollData(data) {
return data.edges.map((asset) => {
return asset.node.image;
});
}
}
Passing in a function into setState instead of an object will give you a reliable value for your component's state and props . One thing to note is that the React documentation makes use of arrow functions in their examples (which is also on my list of things to migrate to in my Shopsifter app!)
React components can possess internal “state,” a set of key-value pairs which belong to the component. When the state changes, React re-renders the component. Historically, state could only be used in class components. Using hooks, you can apply state to functional components too.
With React 16.8, function components can now use state. Before this, data from the state had to be passed down as props from class components to function components or you had to convert your function component to a class component.
In React , whenever we are working with any data, we always use state for storing that data which may be a string , number or any complex object .
You can't the way you have attempted but technically yes, you can have a function that returns the desired state you want initialised in your constructor. I wouldn't suggest doing it though.
You will quickly run into issues where your components aren't updating state correctly.
What you are looking for is a function that returns a value as opposed to sets state. You would do something like this:
constructor(){
super()
this.state = {
modalVisible: false,
photo:""
sourceState: this.getDataSourceState()
}
this.getDataSourceState = this.getDataSourceState.bind(this)
}
getDataSourceState(){
return this.ds.cloneWithRows(this.images)
}
As I mentioned, it is not a good idea to do it this way. You are better off initialising the state values as a default value and then setting the state in your componentDidMount like so:
constructor(){
super()
this.state = {
modalVisible: false,
photo:""
sourceState: null
}
this.getDataSourceState = this.getDataSourceState.bind(this)
}
componentDidMount(){
this.getDataSourceState()
}
getDataSourceState(){
const data = this.ds.cloneWithRows(this.images)
this.setState({soureState: data})
}
This way you have a reusable function which you can call in componentDidUpdate()
if need be for when you move navigate between the same component with different data and want the state to update.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With