Question

我问question这个，我相信回答这个问题的丹尼斯给出了我认为正确的答案。我无法弄清楚如何正确地将变量传回父函数...

以下是我要修复的代码。

儿童成分的儿童

首先，有一个儿童成员。如果单击它，将设置列表的排序方向。它使用“onSortDirectionChange”函数，并应通过设置变量“sortDirection”来设置排序方向。

const GlyphiconDirectionChange = (props) => {
  const { onSortDirectionChange } = props

  return (
    <span>
      {onSortDirectionChange === 'Ascending' ?
          <span onClick={() => onSortDirectionChange('Ascending')} className='glyphicon glyphicon-sort-by-attributes'></span>
        :
          <span onClick={() => onSortDirectionChange('Descending')} className='glyphicon glyphicon-sort-by-attributes-alt'></span>
      }
    </span>
  )
}

单击标题名称旁边的glyphicon，它应该更改列表的方向。简单的组件。

子组件

它的父级，但“ClientContainer”的子级是TableHeaders。 “GlyphiconDirectionChange”位于此组件中以显示您可以单击的向上或向下glyphicon ...

     <GlyphiconDirectionChange onSortDirectionChange={onSortDirectionChange} />

父组件

ClientContainer是最重要的组件（动作等将在以后拆分 - 为简单起见，它们现在在那里）。在这里，TableHeaders显示如下：

        <TableHeaders onSortByChange={this.handleSortBy}
        onSortDirectionChange={this.handleSortDirection}
        query={query}
        currentPage={currentPage}

注意第二行是底部组件的功能。

指的是“HandleSortDirection”。

  handleSortDirection = (values = {}) => {
  const { sortDirection, query, sortBy  } = this.props
  values.query = values.query || ''
  const searchParams = {
    query,
    sortBy,
    sortDirection,
    ...values,
    currentPage: 1,
  }
  console.log('changeHeaders()!', values, searchParams)
  this.fetchClients(searchParams)
}

问题如何在“子组件的子组件”中设置变量并将它们移动到“HandleSortDirection”函数。

我收到错误

未捕获的TypeError：无法在字符串'Descending'上创建属性'query'

我需要将“searchParams”变量“sortDirection”设置为“Ascending”或“Descending”，并在我的函数中正确使用..

如何将sortDirection变量正确传递给父级中的函数。

Answer 1

“如何在”子组件的子组件“中设置变量，并将它们移动到”HandleSortDirection“函数。”

你已经这样做但是你有一个错字。

values.query = values.query || ''

此行有误，因为values等于'Descending'。你从子组件的子组件传入一个字符串，它将被传递给回调链直到它到达此处。

删除该行并将其替换为 const direction = values; 然后在searchParams中传递direction代替sortDirection,。

React Redux通过子组件到父

1 个答案: