靜態方法中的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})
    }

為了確保這不是一個好的做法，它應該可以解決問題，但又不應過度使用。