React.js：在组件之间传递数据答案

【问题标题】：React.js: Passing data between componentsReact.js：在组件之间传递数据
【发布时间】：2020-08-08 01:59:36
【问题描述】：

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

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

我正在努力解决如何将 SearchBar（输入字段查询）中读取的值传递给 DB 查询函数，然后将结果传递给 DataArray。道具在这里不起作用。状态是要走的路吗？再说一次，我怎样才能从其他组件中读取状态，或者我可以吗？

我在这里错过了什么？

任何帮助在这里表示赞赏，

br，米卡

【问题讨论】：

state 确实是要走的路。您需要将搜索栏视为受控组件
您需要父组件中的状态，然后将此状态作为道具发送给两个子组件。你可以在这里阅读更多相关信息 - reactjs.org/docs/lifting-state-up.html

标签： reactjs parameter-passing

【解决方案1】：

由于您没有分享任何代码，解释起来有点困难，但我会尽力而为。

通过引入反应钩子，您可以在功能组件中处理事件。按照link 获取我创建的示例。

要将结果传递给不同的组件，我想推荐 react 的内置函数 context。这是一篇关于同一文章的link。

这不是一个完整的解决方案，但它会引导您朝着正确的方向前进。

快乐学习。

【讨论】：

感谢您的示例，我现在正在获取表单控件。我查看了上下文，但它似乎非常压倒性。我试图将状态添加到我的 App 组件中，并将其作为道具传递给 SearchBar。然后我尝试将 SearchBar 中的输入值设置回 App 组件。这是可行的解决方案吗？我收到错误消息：TypeError: Cannot create property 'setQuery' on string '' 这是修改后代码的链接：jscomplete.com/playground/s477960

【解决方案2】：

这是使用 React Hooks 的一种方法。 GET_REQUEST 取决于您要执行哪种 HTTP 请求。

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

【讨论】：

感谢您的回复。 useQuery 是 React 原生方法吗？我正在考虑使用 Fetch API 或 Axios。那么 useEffect() 是否充当异步代码块？