Javascript 如何从React中的不同类访问状态值？

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

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

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

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

此数据正在搜索类中筛选，但

This.state.names

正在搜索栏类中存储。这个SearchBar类显示在我的标题上，用户可以在这里搜索他们想要的任何内容，然后按search，结果页面出现。那么，我如何获取存储在SearchBar类中的数据并在其他类中使用它呢

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

render() {

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

render（）{
返回(
)
}

搜索栏应该调用SearchResults（[…]）回调，然后

PageResult

可能会接受这些结果，您需要一个协调所有结果的组件

const-App=（）=>{
const[results，setResults]=useState（[]）；
返回(
{results.length&&}
)
}

---

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

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

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

您可以创建一个新组件来存储数据

然后在该组件的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)
 }

---

我没有遵循思路，您是否介意添加代码，然后指出您想要实现的目标？您需要将状态向上拉到父组件，然后通过道具（通常）或上下文（不常见）将其向下传递。或者，你可以使用Redux之类的工具，但如果这是你唯一的问题，那可能就太过分了。那应该怎么做呢？因为我在SearchBar类的render函数中尝试了

，但现在我的页面没有加载。我做错了什么？你能粘贴你的代码吗？因为它有点难以理解，你正试图实现确切的目标