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

【问题标题】：How to update Baobab leaf data before React component render?如何在 React 组件渲染之前更新 Baobab 叶数据？
【发布时间】：2016-06-19 13:55:36
【问题描述】：

ReactJS、Baobab、Material-UI 应用程序显示一些项目，由它们的数字 id 标识。为了显示这些，标题和图像 url 是通过 ajax 从远程服务中检索的。树分支存储该数据：

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 内）。渲染方法应该是 props 和 state 的纯函数。

这可以在上一级解决 - 一旦 ID 列表可用。但是，组件应该能够在其内部处理其数据，这感觉是对的。

请建议一个正确的方法，在第一次渲染 React 组件之前从该组件中立即更新猴面包树数据？

【问题讨论】：

标签： javascript ajax reactjs flux baobab

【解决方案1】：

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

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}/>;
    }
}

【讨论】：

感谢您的回答！我将重新检查 - 我的设置的唯一区别是您在另一个函数（操作）中调用 tree.update()，而我在 componentWillMount() 正文中对其进行了测试。同时，我回滚到父组件中的预取，因为它允许将多个 ajax 调用组合为一个。
对于每条路线我都有一个页面组件（这就像布局）并且只在其中调用预取。此预取补充从 serverPrefetch 获得的值（在服务器上呈现）。换句话说，我尝试只有一个预取，类似于每条路由上的服务器。我认为我们正在使用类似的解决方案

【解决方案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);
  }

【讨论】：