Question

新手。

我通过儿童和下面的孩子传递道具，传递的字符串应该成为一个对象。这是我的代码。

主要容器

return (
  <div className="row">
      <TableHeaders onSortByChange={this.handleSortBy}
        onSortDirectionChange={this.handleSortDirection}
        query={query}
        sortDirection={sortDirection}
        sortBy={sortBy}
        currentPage={currentPage}
      />...

主容器的儿童容器

export const TableHeaders = (props) => {
  const { onSortByChange, onSortDirectionChange, sortDirection, sortBy } = props;
  ...
  <span onClick={() => onSortByChange({onSortByChange:'ClientNumber', onSortDirectionChange: 'Ascending'})}>Client # </span>
  ...
     {sortBy === "ClientNumber" && <span>
          <GlyphiconDirectionChange onSortDirectionChange={onSortDirectionChange} 
            sortDirection={sortDirection}
            sortBy={sortBy}/>
        </span>}...

儿童容器 （根据是否＆＃34; Ascending＆＃34;或＆＃34; Descending＆＃34;简单地显示一行

const GlyphiconDirectionChange = (props) => {
  const { onSortDirectionChange, onSortByChange, sortDirection, sortBy } = props
    console.log('GlyphiconDirectionChange() sortBy and sortDirection!', sortBy, sortDirection)
  return (
    <span>
      {sortDirection === 'Ascending' ?
          <span onClick={() => onSortDirectionChange({onSortDirectionChange:'Descending', onSortByChange: {sortBy}})} className='glyphicon glyphicon-sort-by-attributes-alt'></span>
        :
          <span onClick={() => onSortDirectionChange({onSortDirectionChange:'Ascending', onSortByChange: {sortBy}})} className='glyphicon glyphicon-sort-by-attributes'></span>
      }
    </span>
  )
}

主容器中使用的功能 上面提到的两个函数 - onSortByChange和onSortDirectionChange。它们目前在主要的父容器中。

    handleSortBy = (values) => {
    const { sortBy, sortDirection, query} = this.props
    values.onSortByChange = values.onSortByChange
    values.onSortDirectionChange = values.onSortDirectionChange
    const searchParams = {
      query,
      sortBy,
      sortDirection,
      ...values,
      currentPage: 1,
    }
    console.log('changeSorBy()!', values)
    this.fetchClients(searchParams)
  }

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

问题用户单击第一列并在该列上重新排序。它还会在列标题旁边显示glyphicon图标以获取排序方向。这有效，并且可以通过下面的console.log来解决。

changeSorBy()! Object {onSortByChange: "ClientNumber", onSortDirectionChange: "Ascending"}
ClientsContainer.jsx:32 fetchClients()! Object {currentPage: 1, pageSize: 10, query: "", sortBy: "ClientNumber", sortDirection: "Ascending"…}
reducer.js:19 queryString values! Object {page: 1, pageSize: 10, query: "", 
sortBy: "ClientNumber", sortDirection: "Ascending"}
reducer.js:43 reducer.queryString()! ?
page=1&pageSize=10&query=&sortBy=ClientNumber&sortDirection=Ascending

当我点击glyphicon图标改变方向时，孩子的孩子被调用但突然sortBy成为一个对象，现在没有什么等同，因为它现在测试对象而不是字符串..

这是点击图标的consol.logs。注意现在sortBy是一个对象，而不是说＆＃34; ClientNumber＆＃34; ...

changeSortDirection()! Object {onSortDirectionChange: "Descending", onSortByChange: Object}
ClientsContainer.jsx:32 fetchClients()! Object {currentPage: 1, pageSize: 10, query: "", sortBy: "ClientNumber", sortDirection: "Ascending"…}
reducer.js:19 queryString values! Object {page: 1, pageSize: 10, query: "", sortBy: Object, sortDirection: "Descending"}
reducer.js:43 reducer.queryString()! ?page=1&pageSize=10&query=&sortBy=%5Bobject%20Object%5D&sortDirection=Descending
TableHeaders.jsx:47 TableHeaders()! Object {sortBy: "ClientNumber"} Descending
TableHeaders.jsx:53 SortBy() before onClick Object {sortBy: "ClientNumber"}
TableHeaders.jsx:55 SortBy() sortDirection()! Object {sortBy: "ClientNumber"} Descending

查询字符串现在有＆＃34;％5Bobject％20Object％5D＆amp;＆＃34;而不是＆＃34; ClientNumber＆＃34; ..

有人可以向我解释为什么它会成为一个对象，我将如何修复并在将来避免它？

修改

我做了Ollim建议的修改。各种Console.Logs显示＆＃34; sortBy＆＃34;和＆＃34; sortDirection＆＃34;都是未定义的。

changeSorBy()! Object {sortBy: "ClientNumber", sortDirection: "Ascending", onSortByChange: undefined, onSortDirectionChange: undefined}
ClientsContainer.jsx:32 fetchClients()! Object {currentPage: 1, pageSize: 10, query: "", sortBy: "ClientNumber", sortDirection: "Ascending"…}
reducer.js:19 queryString values! Object {page: 1, pageSize: 10, query: "", sortBy: undefined, sortDirection: undefined}
reducer.js:43 reducer.queryString()! ?page=1&pageSize=10&query=

正如我所提到的，我是初学者，但我认为你不能改变道具，因为状态和状态是不可改变的。这些是常数。这就是为什么我使用了不是常量的单独变量然后将它们用作我将设置查询的值的一部分..

Answer 1

在TableHeader中：

<span onClick={() => onSortByChange({onSortByChange:'ClientNumber', onSortDirectionChange: 'Ascending'})}>Client # </span>

应该是

<span onClick={() => onSortByChange({sortBy:'ClientNumber', sortDirection: 'Ascending'})}>Client # </span>

同样在您的处理程序中，您似乎没有任何代码：

values.onSortByChange = values.onSortByChange
values.onSortDirectionChange = values.onSortDirectionChange

将变量传递给子节点的React / Redux会生成对象而不是字符串

1 个答案: