静态方法中的setState

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 ），也不应设置另一个组件的状态。 如果没有访问组件实例，它当然不能这样做。

代替：

• 提升状态并将其作为道具传递给组件，或者
• 使用门户并再次将状态作为道具传递（注意：尽管搜索会发现提供类似功能的项目，但不能完全确定React Native是否支持门户） ，或者
• 使用上下文 （React Native 支持 ）

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

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})
    }

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