Question

我想使用setState方法设置一个组件与另一个组件的状态，因为它似乎涉及较少的编码，但是我知道我不能在产生问题的静态方法中使用this关键字为了我。我想知道另一个解决此问题的方法。帮助将不胜感激。

第一部分

class First extends Component {

    filterByLocation(loc) {
        const filteredData = this.state.passedInfo.filter(({area}) => area === loc);
        this.setState({members: filteredData})
    }

}

第二部分

class Second extend Component {

    renderSuggestion() {

        <TouchableOpacity 
            onPress = {()=> this.setState({location}, () => {
                First.filterByLocation(this.state.location);
            })}>

            <Text> {"Click Me"}</Text>
        </TouchableOpacity>
    }
}

Answer 1

我最初认为这是一条评论，但实际上，这是一个答案：

即使一个组件可以访问该组件实例（因此也可以访问setState），也不应设置另一个组件的状态。当然，如果不能访问组件实例，就无法做到这一点。

相反：

Lift state up并将其作为道具传递给组件，或者
使用portals并再次将状态作为道具传递（注意：尽管a search启用了提供类似功能的项目，但并不完全确定React Native是否支持门户），或
使用context（在React Native中为is supported）

...或者可能是其他任何东西。在您的特定情况下，提升状态似乎是正确的事情。

Answer 2

为什么不将整个对象传递给您的方法，如：

    <TouchableOpacity 
        onPress = {()=> this.setState({location}, () => {
            Home.filterByLocation(this, this.state.location);
        })}>

        <Text> {"Click Me"}</Text>
    </TouchableOpacity>

过滤方法：

    filterByLocation(context, loc) {
        const filteredData = context.state.passedInfo.filter(({area}) => area === loc);
        context.setState({members: filteredData})
    }

为确保不是一个好的做法，它应该可以解决问题，但又不应过度使用。

静态方法中的setState

2 个答案: