鍍金池/ 問答/HTML/ React component 之間傳值的問題

React component 之間傳值的問題

需求：
現(xiàn)在有兩個 component ，一個是 parent，一個是 child，在 parent component 中，我需要發(fā)送一個請求獲取到數(shù)據(jù)，然后我需要把數(shù)據(jù)傳遞給 child component， child component 在拿到數(shù)據(jù)后再去根據(jù)傳遞過來的數(shù)據(jù)發(fā)送請求。

嘗試的方法：
在 parent component 的 componentDidMount 方法中發(fā)送請求，然后在 render 中把請求的 props 數(shù)據(jù)傳遞給 child component，child component 在 componentDidMount 中在去接收傳遞過來的數(shù)據(jù)進行請求數(shù)據(jù)，結(jié)果發(fā)現(xiàn)并不能得到想要的結(jié)果。原因是：
當(dāng) parent render 之后，接著 child 就會 render，然后 child componentDidMount 就會被調(diào)用，最后才會調(diào)用 parent componentDidMount，那么我在 parent 中拿到數(shù)據(jù)后 re-render，在 child 不會再次調(diào)用 componentDidMount了（componentDidMount 只會執(zhí)行一次）

請問有其它的方法可以實現(xiàn)這個需求嗎？

回答
編輯回答
不討囍

1、parent組件中在componentDidMount中通過ajax獲取數(shù)據(jù)，同時利用setState將數(shù)據(jù)變化更新到本身的state中。
2、在parent組件中用state作為child組件的props，進行數(shù)據(jù)的傳遞
3、child組件中componentWillReceiveProps監(jiān)聽數(shù)據(jù)更新實現(xiàn)child組件中的二次請求

2018年9月10日 06:42
編輯回答
祈歡

parent在componentWillMount的時候去請求數(shù)據(jù)，可以把數(shù)據(jù)用this.data = xxx;或者this.setState({data:xxx})保存
parent在render的時候獲取設(shè)置的數(shù)據(jù)，然后傳遞給child
child在componentWillMount獲取傳遞下來的數(shù)據(jù)，然后去請求數(shù)據(jù)，請求成功，可以把數(shù)據(jù)用this.data = xxx;或者this.setState({data:xxx})保存
child在render的時候渲染出來請求的數(shù)據(jù)就可以了。
或者直接在render時獲取數(shù)據(jù)，請求數(shù)據(jù)一起進行，不用生命周期也可以做。不過如果是異步的話感覺上不太好。比如用axios，一般是在then(data=>{xxx})后才獲取得到數(shù)據(jù)，而此操作是異步的

2018年3月1日 12:56
編輯回答
卟乖

子組件componentWillReceiveProps方法內(nèi)監(jiān)聽你的 props更新，執(zhí)行相應(yīng)操作。

2017年10月31日 07:45
編輯回答
背叛者

理一下

  1. parent Container請求數(shù)據(jù)
  2. parent Container 獲取到數(shù)據(jù)，自然會做數(shù)據(jù)處理，然后rerender
  3. child 接收到parent傳遞的數(shù)據(jù)
  4. child根據(jù)接受到的數(shù)據(jù)進行請求。
  5. child的請求回來rerender

首先表明，為什么將請求放入componentDidMount？

什么情況下將請求放入componentDidMount？

正如你了解的，componentDidMount只走一下，這一次是你通過ReactDom.render，也就是Virtual Dom 落實到真實dom之后走的，適合什么樣的請求呢？ 適合頁面初始化的請求，而且不依賴回調(diào)數(shù)據(jù)，好處是什么呢，請求干凈利落，僅僅用來做界面的初始化動作，但更經(jīng)常放入componentWillMount

一旦涉及到，依賴回調(diào)數(shù)據(jù)（比如你這里parent Container請求到的數(shù)據(jù)傳遞過來的情況），那么你應(yīng)該將你的請求放入一個可以重復(fù)調(diào)用的聲明周期中,類似什么？

componentWillReceiveProps中，這個監(jiān)聽props改變，這里可以監(jiān)聽parentContainer傳入的props，然后這里可以根據(jù)傳入的props進行傳入請求。

2017年5月26日 06:34
編輯回答
悶油瓶

謝邀！
首先React組件一般分為容器組件和展示組件，這兩者到底有什么區(qū)別呢？
展示組件通常被實現(xiàn)為無狀態(tài)功能組件(stateless functional components)，也就是說它們沒有內(nèi)部狀態(tài)，只是負責(zé)把獲取到的數(shù)據(jù)渲染出來，因為它不知道獲取到的數(shù)據(jù)是什么樣的，不知道props和state的變化，它永遠不應(yīng)該改變props中的數(shù)據(jù)。實際上，任何的組件從父級得到的props都是不可變化的。

而容器組件知道數(shù)據(jù)，知道數(shù)據(jù)的形態(tài)以及數(shù)據(jù)從何而來，所以它們負責(zé)處理業(yè)務(wù)邏輯，它們接收信息并對其進行格式化，以便由展示組件簡單地使用。一般情況，“容器組件”總是作為可視化組件的父級組件出現(xiàn)！

當(dāng)然，凡事都沒有絕對性！您也可以在展示組件處理業(yè)務(wù)邏輯，相比之下展示組件負責(zé)渲染數(shù)據(jù)更合理些！好了，廢話不說了，就問題而言大致有兩種處理思路：

第一種：在child component 聲明周期函數(shù)componentWillReceiveProps內(nèi)監(jiān)聽nextProps，執(zhí)行余下操作。

第二種：所有請求都在父組件完成，獲取到最終的數(shù)據(jù)，然后通過props傳遞給子類。至于兩個請求依賴關(guān)系，es6之前普通ajax，我們要層層嵌套回調(diào)，es6我們可以直接用Promise，Promise優(yōu)點就是多重鏈?zhǔn)秸{(diào)用，可以避免層層嵌套回調(diào)

2017年11月14日 15:43