时间戳

首页 > 解决方案 > 使用反应钩子通过父组件传递 useState 值（获取 = 未定义）

node.js - 使用反应钩子通过父组件传递 useState 值（获取 = 未定义）

问题描述

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

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

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

代码如下：

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值通过 Pagination 组件传递：

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

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

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

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

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

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

标签： node.jsreactjsreact-componentuse-state

解决方案

与其传递一个返回的函数search，为什么不把search自己作为一个道具传递下去呢？

<Pagination
  search={search}

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

推荐阅读