如何在React組件呈現之前更新猴麪包樹葉數據？

ReactJS，Baobab，Material-UI應用程序顯示一些項目，用它們的數字ID標識。要顯示這些內容，標題和圖片url將通過ajax從遠程服務中檢索。樹枝存儲了數據：如何在React組件呈現之前更新猴麪包樹葉數據？

data: { 
    12345: {title:'ABC', image:'https://...'}, // id is 12345 
    12346: {... 
}

在項目組件創建和第一呈現，其擴展的數據可能會或可能不會在樹中已經可用。如果不是，則ajax調用將被接受以接收該數據。可能會發生多個項目使用相同的項目ID創建。

爲了避免對同一個ID的額外請求，我想在第一次請求該ID的信息時將一個僞信息{title:'loading', image:'spinner.gif'}放入樹中。因此這個數據將被用於第一個render()。連續的組件會得到這個虛擬信息，並且不會發起任何額外的請求。

問題：如何以及我可以在哪裏放置代碼以測試樹是否還沒有信息，並在那裏放置虛擬表示其「掛入」狀態並排入請求？

到目前爲止已經試過：

組件constructor - 道具設置不存在尚未;
componentWillMount() - 儘管tree.commit()設置了虛擬值之後，第一個渲染以樹的舊狀態開始;
在分支函數中動態創建指向其數據的組件光標。得到了警告：

的setState（...）：現有的狀態轉變（如render內）期間，不能更新。渲染方法應該是道具和狀態的純函數。

這可以解決上一級 - 一旦id列表可用。但是一個組件應該能夠在其內部處理其數據是正確的。

請指教一個正確的方法，以便在組件內第一次渲染React組件之前立即更新Baobab樹數據？

來源

2016-03-05 Serge

在我的情況（我使用相同的堆棧）包分支工作正常。

import BaobabPropTypes from 'baobab-react/prop-types'; 
class Actions { 
    /** 
    * @param {Baobab} tree 
    */ 
    static prefetchTree = (tree) => { 
     tree.select(somePath).set(defaultValue); 
     tree.commit(); 
    }; 
} 

class Page extends React.Component { 
    static contextTypes = { 
     tree: BaobabPropTypes.baobab 
    }; 

    componentWillMount() { 
     Actions.prefetchTree(this.context.tree); 
    } 

    render() { 
     return <Branch {...this.props}/>; 
    } 
}

來源

2016-03-11 15:37:59 Yozi

感謝您的回答！我會重新檢查 - 我的設置唯一的差異是你在另一個函數（action）中調用'tree.update（）'，而我在'componentWillMount（）'主體中測試了它。同時我又回到父組件的預取中，因爲它允許將多個ajax調用分組到一個組件中。 – Serge

對於每條路線我有一個頁面組件（這就像佈局），並只在其中調用預取。這個預取補充值從serverPrefetch獲得（在服務器上呈現）。換句話說，我嘗試只有一個預取，類似於每個路由上的服務器。我認爲我們正在使用類似的解決方案 – Yozi

猴麪包樹有get事件，用它來檢測返回值還未被取請求：

tree.on('get', function(e) { 
    if (e.data.data === undefined) { 
    const path = e.data.path; // requested cursor path like ['data',12345] 
    const id = path[1]; 
    FETCH_DATA(id) 
     .then(data => tree.set(path , data)); 
    tree.set(path, PLACEHOLDER_DATA); 
    }

來源

2017-05-24 11:50:56 elcsiga

如何在React組件呈現之前更新猴麪包樹葉數據？

回答

相關問題