简体   繁体   中英

ReactJS: Is it possible to get the state value in constructor?

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM