使用 useState 在 React 组件之间传递值

Posted 2023-03-08

【中文标题】使用 useState 在 React 组件之间传递值

【英文标题】：Passing values between React components with useState

【发布时间】：2020-03-25 17:28:18

【问题描述】：

我使用带有 Apollo 客户端的 React 组件作为功能组件。我的主要搜索组件的函数体如下所示：

function SearchContainer(props) 
    const [begTime, setBegTime] = useState('')

    const runSearch(begin_time) 
        console.log('begin_time: ', begin_time) <== The printed value is Ok!
        setBegTime(begin_time) <=== Use hook to set the value of begTime
        console.log('begTime: ', begTime)  <=== The output shows no change in begTime. Why?
    

    return (
// Use SearchForm to get the search parameters.
        <SearchForm 
          handleSearch=runSearch <== Use SearchForm to get begin_time back into this component.
        />       
// Provide the parameters from SearchForm and run the useQuery from Apollo using this parameters.
        <SearchResults
          begTime=begTime
        />
    )

SearchForm 只是一个普通的表单，它是一个带有 useState 钩子的 React 函数组件，并在表单上调用提交 hanldeSearch 函数。

function SearchForm(handleSearch)  <== handleSearch function from the parent component.
   const handleSubmit = (begin_time) => 
       handleSearch(begin_time) <== This call works and the value will be provided to the parent.
    
...

我对这段代码的想法是创建 2 个独立的组件。一个组件（SearchForm）应该获取参数。其他组件 (SearchResults) 将获取此参数作为参数，使用 useQuery 运行查询并显示结果。

但 useState 钩子在我的情况下不能很好地工作。有趣的是，如果我两次调用相应的搜索表单，我可以在 runSearch 函数中看到 begTime 获得了先前的搜索值而不是初始值。所以显然 useState 是可行的，但我想用当前值而不是以前的值来运行搜索。

是否有可能使用 React 钩子创建这样的组件？这是我第一次使用钩子而不是类的大测试。

提前致谢

安德烈

【参考方案1】：

关于你的问题

const runSearch(begin_time) 
        console.log('begin_time: ', begin_time) 
        setBegTime(begin_time) 
        console.log('begTime: ', begTime)  <=== The output shows no change in begTime. Why?
    

输出显示 begTime 没有变化。为什么？ 如文档中所述，当我们设置状态为异步函数时。 我的意思是你的代码将继续运行并设置状态反应将在另一个线程上启动子进程。当它完成时，它会将结果传递给主线程。 （对于早期版本，您可以在 useEffect 或 componentDidUpdate 中使用 c）。 所以要点是

在 setBegTime(begin_time) 开始异步进程 在主线程代码不会等待它 所以下一个语句console.log('begTime: ', begTime) 被处理，你没有看到任何变化，因为实际上它的值还没有更新。 React 仍在更新值。

---

更新过程是异步的，因为 React 不想让主线程等待繁重的工作（更新状态是繁重的过程），就好像它等待然后网页在完成之前不会响应。所以它改为在另一个线程上运行该进程。

---

第二个 你可以试试这个

function SearchContainer(props) 
    const [begTime, setBegTime] = useState('')
    const [response,setResponse] = useState()
    useEffect(()=>
    const runSearch = (begin_time) 
        setBegTime(begin_time) 
    
,[begin_time])

// u can rather define working of handleSubmit in parent component and <br/>
// store its output in state and then pass it to another component
const handleSubmit = (begin_time) => 
       resp = handleSearch(begin_time)
       setResponse(resp)
    
        return (
    // Use SearchForm to get the search parameters.
            <SearchForm 
              handleSearch=()=>handleSubmit()
            />       
    // Provide the parameters from SearchForm and run the useQuery from Apollo using this parameters.
            <SearchResults
              begTime=begTime
              response=response
            />
        )