Question

有一个带有输入字段的组件。键入任何值都会将其发送到状态字段（searchString）。

现在我需要将这个状态值放入我的构造函数中，因为它应该作为参数发送到我的订阅中：

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

我尝试将值记录到控制台中，但我无法获取状态对象：

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: ''
    }
}

Answer 1

构造函数在生命周期中只调用一次。所以一旦你更新了状态构造函数就不会被调用。

Answer 2

如果您没有改变状态，则不应该将属性存储在状态中。这也适用于将redux数据存储到您的州。不要复制数据。我不知道订阅是否是异步的，所以代码设置应该是它的回调

不确定订阅但是，如果你只想做一次吗？通过代码的逻辑，您可以订阅搜索字段的每个更改。如果它只在第一次渲染时发生，请使用组件（已/将要）安装周期

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

ReactJS：是否有可能在构造函数中获取状态值？

2 个答案: