Question

ReactJS，Baobab，Material-UI应用程序显示一些由其数字ID标识的项目。为了显示这些，通过ajax从远程服务检索标题和图像URL。树枝存储数据：

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树数据吗？

Answer 1

在我的情况下（我使用相同的堆栈）wrap分支工作正常。

UISearchDisplayController

Answer 2

Baobab有一个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);
  }

如何在React组件渲染之前更新Baobab叶数据？

2 个答案: