There is a component with an input field. Typing any value will send this into a state field ( searchString
).
Now I need to get this state value into my constructor as it should be send as a parameter to my subscription:
class Example extends Component {
constructor(props) {
super(props)
const subscription = Meteor.subscribe('images', this.state.searchString) // <-- How to get state value?
this.state = {
ready : subscription.ready(),
subscription: subscription,
searchString: ''
}
}
searchImage(event) {
const searchString = event.target.value
this.setState({ searchString })
}
render() {
const posts = Collection.find({}).fetch()
return (<Input onChange={ this.searchImage.bind(this) }/>)
}
}
export default Example
I tried to log the value into the console, but I can't get the state object:
constructor(props) {
super(props)
console.log(this) // I do get context, props, refs, state and updater objects
console.log(this.state) // I do get `undefined`, but in the line above I do see state object with all fields
const subscription = Meteor.subscribe('images')
this.state = {
ready : subscription.ready(),
subscription: subscription,
searchString: ''
}
}
A constructor is called only once in a lifecycle. So once you update the state constructor would not be called.
You should not be storing property in state, if you are not mutating it. That apply also for storing redux data to your state. Dont duplicate data. Iam dont know if subscribe is asynchronious so the code setting should be as its callback
Not sure about the subscribing though, if you wanna do it just once? By the logic of your code, you are subscribing on every change of the search field. If it should happen only on first render, use component(Did/Will) mount cycle
class Example extends Component {
constructor(props) {
super(props)
this.state = {
ready : false,
subscription: null,
searchString: ''
}
}
searchImage(event) {
const searchString = event.target.value
// Iam not sure, if subscribe is asynchronious so the code setting should be as its callback
const subscription = Meteor.subscribe('images', searchString)
this.setState({
searchString,
subscription,
ready: subscription.ready();
})
}
render() {
const posts = Collection.find({}).fetch()
return (<Input onChange={ this.searchImage.bind(this) }/>)
}
}
export default Example
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.