通过从子组件到父组件的函数来反应Redux传递参数

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;代替const direction = values; 然后在searchParams中传递direction代替sortDirection, 。