React.js。在组件之间传递数据

Question

我正在学习React，并尝试不使用基于类的组件，而是将组件作为函数实现。

我有一个简单的应用程序，它执行查询到DB。我的组件基本上是Searchbar和DataArray，在App中构建。

我正在努力解决如何将SearchBar中读取的值（输入字段查询）传递给DB查询函数，然后将结果传递给DataArray。Props在这里是行不通的。是否应该使用状态？那么，我如何从另一个组件中读取状态，或者我可以吗？

我在这里缺少什么？

在这里感谢任何帮助。

br, Mika

Answer 1

由于你没有分享任何代码，所以解释起来有点困难，但我会尽我所能。

随着反应钩子的引入，你可以在一个功能组件中处理事件。按照这个 联系 来获取我创建的样本。

为了将结果传递给不同的组件，我想推荐使用react的内置函数context。下面是一个 联系 的一篇文章。

这不是一个完整的解决方案，但它将引导你走向正确的方向。

祝你学习愉快。

Answer 2

下面是用React Hooks的一种方法。GET_REQUEST取决于你想做什么样的HTTP-request。

const SearchBar = () => {
  const [myStateVariable, setMyStateVariable] = useState(null)
  
  const { loading, data } = useQuery(GET_REQUEST, {
    variables: "my_request_param"
  })

  useEffect(() => {
    if(!loading && data) {
      setMyStateVariable(data)
    }
  }, data)

  return (
    !loading && (
      <DataArray propsVariable={myStateVariable} />
    )
  )
}

const DataArray = ({ propsVariable }) => {
  return (
    <div>My variable from request: {propsVariable}<div/>
  )
}