ReactJS - 組件來改變另一個呈現的內容

我正在創建一個reactJS應用程序，它將顯示手機列表。我目前正在調用API，將狀態設置爲響應，然後顯示內容。我現在正在尋找添加排序順序，但有困難。ReactJS - 組件來改變另一個呈現的內容

當用戶進入/手機/蘋果/ iPhone，路由將呈現以下組件調用API，設置狀態，將數據傳遞到結果組件...

export default class Phones extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     data: null, 
     make: this.props.params.make || null, 
     model: this.props.params.model || null 
    }; 
} 

componentDidMount(){ 
    const makeQuery = this.state.make ? this.state.make + '/' : ''; 
    const modelQuery = this.state.model ? this.state.model : ''; 
    const fetchUrl = '/api/phones/' + makeQuery + modelQuery; 

    fetch(fetchUrl, { 
     headers: { 
      Accept: 'application/json' 
     } 
    }).then(response => { 
     if (response.ok) { 
      response.json().then(json=> { 
       this.setState({data: json}); 
      }); 
     } 
    }); 
} 

render() { 
    if (this.state.data) { 
     const currentUrl = this.props.location.pathname; 

     return (
      <section className="phones"> 
       <Filters 
        data={this.state.data} 
        currentUrl={currentUrl} /> 
       <Results 
        data={this.state.data} /> 
      </section> 
     ) 
    } 
} 
}

的結果組件將映射數據並呈現電話列表。

在Filters組件中，我有一個下拉菜單，允許用戶按價格值對結果進行排序，這也設置了狀態。

export default class Filters extends Component { 
constructor(props){ 
    super(props); 
    this.state = { 
     value: 0 
    } 

    this.onChange = this.onChange.bind(this); 
} 

onChange(e){ 
    this.setState({value: e}) 
} 

render() { 
    return (
     <div> 
      <p>Price</p> 
      <select onChange={this.onChange}> 
       <option value='asc'>low to high</option> 
       <option value='desc'>high to low</option> 
      </select> 
     </div> 
    ); 
} 
}

我遇到的問題是，我不知道我怎麼能這個過濾器適用於這使得結果的分量，什麼是去了解這一點的最好方法是什麼？

我已經開始閱讀終極版，但也很困惑，如果手機的數據和過濾器應該是在商店，因爲它是暫時的，如果他們去到另一個頁面，即/手機將改變/三星/銀河/

任何幫助表示讚賞

來源

2017-04-17 Phil

通常在React中，父容器將處理所有子組件的狀態 - 數據和道具在一個方向上向下流過組件樹。

Redux提供了一種讓容器訪問更新狀態的方法。

This page from the Redux docs提供了有關如何與React集成的說明。

Redux提供了一個包含整個應用程序狀態的單個對象。然後，額外的NPM模塊react-redux提供了將組件連接到全局Redux狀態的兩個功能：mapStateToProps和mapDispatchToProps。

使用這種方法，你可以有你的過濾器容器設置全局狀態的切換：

state = { 
    phones: [], 
    sortBy: 'price', 
    sortOrder: 'asc', 
}

或同級。然後可以使用mapStateToProps訪問排序狀態片，並使用mapDispatchToProps來「分派」更新狀態的操作。

Redux文檔非常出色，並且以簡潔和初學者爲中心進行編寫。

來源

2017-04-17 23:15:07 Toby

那太好了，謝謝你一個偉大的例證。我已經閱讀了文檔並理解（我認爲），對於涉及API的示例尤其有幫助。 – Phil

所以有幾種方法可以做到這一點。你提到你剛剛開始考慮Redux，並且我鼓勵你繼續這個道路。它將在應用程序狀態管理領域爲您提供很多幫助。這就是說，如果你與這樣剛反應過來：

父組件是手機，所以寫在Phones一個輔助方法，以保持過濾器的軌道（請確保您設置了默認過濾狀態時，組件第一構造或坐騎像你的品牌和型號一樣）：

setFilter(filter) { this.setState({filter}); }

妙傳Phones組件狀態的filter到兩個Filters和Results組件。還通過setFilter類方法走進孩子Filters組件（所有這一切都在你的Phones組件的render方法來完成）：

return (
    <section className="phones"> 
     <Filters 
      filter={this.state.filter} 
      onChange={this.setFilter} 
      data={this.state.data} 
      currentUrl={currentUrl} /> 
     <Results 
      data={this.state.data} 
      filter={this.state.filter}/> 
    </section> 
)

更改Filter組件，以便其onChange事件是你傳遞給它的setFilter處理程序，和value在<select>組件中的prop是我們在（2）中通過的filter。

我會給你留3個。我想你可以弄明白:)。請注意，您現在可以在結果類中以訪問過濾器值的方式訪問，並且可以在該組件中進行排序。

來源

2017-04-17 23:22:23

我已經開始閱讀終極版，但也很困惑，如果手機的數據和過濾器應該是在商店，因爲它是暫時的，如果他們去到另一個頁面，即/手機將改變/三星/銀河/

Redux是解決此問題的絕佳解決方案。通過將狀態外化，這兩個組件都可以輕鬆訪問必要的值。

您對數據更改的關注不應該如此，因爲這是redux商店的一個重要且常見的情況。即使是他們的文檔中的todo list example也會實現與您所描述的類似的過濾器組件。

另一個好處是，如果您使用redux-thunk中間件（或任何您想要的異步中間件），您還可以將您的fetch調用移出組件，使其變得更簡單一些。

這種設置有很多例子，所以我現在不會爲你寫任何東西，但我會在評論中更新這個答案。

或者，您可以使用回調在組件之間傳遞數據。

這從this blog圖像有是如何可以做到這一點

來源

2017-04-17 23:24:22

ReactJS - 組件來改變另一個呈現的內容

回答

相關問題