如何在React中访问不同类的状态值

Question

我正在尝试创建一个搜索栏来过滤一组数据。我所做的搜索函数使用了几种状态来过滤结果。当搜索栏和结果页面在同一个类中时，搜索功能可以工作，但我现在要做的是将搜索栏分开，并在单独的页面上显示搜索结果。这是在SearchBar类中设置的状态。

handleChange = (event) => {
this.setState({
names: event.target.value
})
}

问题是我不知道如何将存储在SearchBar类中的数据显示在结果页面上。以下是我如何在结果页面上筛选结果。

const filteredData = data.filter(entry => (entry.name === (this.state.names))

该数据在Search类中进行筛选，但this.state.names存储在SearchBar类中。这个SearchBar类显示在我的标题上，用户可以在这里搜索他们想要的任何内容，按下搜索键后，结果页面就会出现。那么，我如何获取存储在SearchBar类中的数据并在其他类中使用它呢？

UPDATE：我尝试将状态传递给render函数中的Search类，但这会导致整个页面冻结。

render() {
return (
<Search names = {this.state.names} />
)
}

Answer 1

不确定我是否理解正确，但：

1. 您可以制作一个新组件来存储数据。

2. 然后在组件的onChange中使用此功能(或类似功能(

   const filterData = (e) => {
   const valueToCheck = e.target.value
   let newArr = []
   for(entry of data) {
   // do the logic
   //push the data you want into an array
   newArr.push(entry)
   }
   setState(newArr)
   }
   

Answer 2

SearchBar应该调用onSearchResults([…](回调，然后PageResult可能会接受这些结果，您需要一个协调所有结果的组件。

const App = () =>{
const [results, setResults] = useState([]);
return (<>
<SearchBar onSearchChange={setResults}/>
{ results.length && <PageResult results={results}/> }
</>)
}

SearchBar将使用过滤后的数据调用props.onSearchChange(results)。应用程序组件将对该更改做出反应，并将这些结果发送到PageResult组件