React/Redux將變量傳遞給子對象而不是字符串產生對象

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>}... 

兒童容器的兒童 （簡單地示出了基於是否它的 「升序」 或一行「Descending」）

在主容器正在使用個

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) 
    } 

問題 用戶點擊在第一列上，並將其重新呈現排序該列。它還在列標題旁邊顯示排序方向的圖標圖標。這工作，並由下面的console.logs出來。

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是一個對象，而不是說「ClientNumber」 ......

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 

查詢字符串現在有「％5Bobject％20Object％5D & 「而不是」客戶編號「..

有人可以向我解釋爲什麼它會成爲一個對象，我怎樣才能修復並避免將來呢？

編輯

我做了Ollim建議的修改。各種Console.Logs顯示「sortBy」和「sortDirection」都未定義。

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