使用反应挂钩通过父组件传递 useState 值（getting = undefined）

Question

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

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

这个组件需要传递用户输入的搜索字符值，这就是我遇到的问题。 也就是说，我需要给父组件传一个值

代码如下：

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

打印search值通过分页组件：

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

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

完成这项工作（未成功）：

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

函数 getSearchDB() { return 搜索； }

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

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

伙计们，让我知道 post 是否混淆或英文写得不好。

Answer 1

与其传递 returns search 的函数，为什么不直接传递 search 本身作为 prop？

<Pagination
  search={search}

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

Answer 2

添加：

   <Pagination
   search={search}
/>

在分页组件中：

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

使用反应挂钩通过父组件传递 useState 值（getting = undefined）

Passing useState value through parent component using react hooks (getting = undefined)

node.js

reactjs

react-component

use-state