使用反应钩子通过父组件传递useState值（获取=未定义）答案

【问题标题】：Passing useState value through parent component using react hooks (getting = undefined)使用反应钩子通过父组件传递useState值（获取=未定义）
【发布时间】：2021-01-16 16:51:43
【问题描述】：

我正在一个已经开始使用 React 类版本的项目中工作。我计划使用 react 钩子，所以不要重构所有类，因为我编写新代码，我正在尝试混合这些反应版本（如果这是一个好主意，我应该重构所有）。

我正在创建一个带有分页和搜索的列表。分页和搜索在一个独特的组件中。

这个组件需要传递用户输入的搜索字符值，这就是我遇到问题的地方。 换句话说，我需要向父组件传递一个值。

代码如下：

useState 钩子：

const [search, setSearch] = useState('');

过滤器组件，改变search值：

const Filter = () => {
    return (
      <Card>
        <Form.Group label="Filtro">
          <Grid.Row gutters="xs">
            <Grid.Col>
              <Form.Input
                name='search'
                placeholder='Filtro'
                autoFocus
                value={search}
                onChange={e => setSearch(e.target.value)}
              />
            </Grid.Col>
            <Grid.Col auto>
              <Button
                color="success"
                icon="search"
                onClick={filtrar}
              >
              </Button>
            </Grid.Col>
          </Grid.Row>
        </Form.Group>
      </Card>
    );
  }

function getSearchDB() {
    setSearch((search) => {
      return search;
    })
  }

分页组件，接收道具：

<Pagination
  baseUrl={'vehicles/toUse'}
  updateState={setStateDB}
  getSearch={getSearchDB}
  fields={'license_plate'}
/>

通过Pagination组件打印search值：

console.log(this.props.getSearch()) //print undefined

OBS： updateState={setStateDB} 工作正常。

为完成这项工作所做的事情（没有成功）：

在getSearch={getSearchDB} 中直接传递搜索值。结果：this.props.getSearch()打印未定义
将 getSearchDB() 定义为：

函数 getSearchDB() { 返回搜索； }

结果：this.props.getSearch() 打印未定义。

有没有办法让它发挥作用？

伙计们，如果帖子混乱或英语写得不好，请告诉我。

【问题讨论】：

标签： node.js reactjs react-component use-state

【解决方案1】：

与其传递一个返回 search 的函数，为什么不直接传递 search 本身作为一个 prop 呢？

<Pagination
  search={search}

const Pagination = (props) => {
  console.log(props.search);

【讨论】：

我的分页组件正在使用Class 和constructor(props) 来操作道具。 console.log(props.search); 继续抛出 undefined。在构造函数search: props.search 中尝试了这个来打印console.log(this.state.search);，但也得到了undefined。
试过这个：<Pagination search={search}
因为search 以空字符串开头，所以它不应该是undefined，除非你使用setSearch(); 或类似的东西
我做错了。 @CertainPerformance 显示的效果。

【解决方案2】：

添加：

   <Pagination
   search={search}
/>

在组件分页中：

    const Pagination = ({search}) => {
         console.log(search);
         return {
         //...
         }
     }

【讨论】：