如何在 React 组件渲染之前更新猴面包树叶数据

How to update Baobab leaf data before React component render?

本文关键字：叶数据 猴面包树 更新 数据 React 组件      更新时间：2023-09-26

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()。连续的组件将获得该虚拟信息，并且不会启动任何额外的请求。

问题：如何以及在哪里可以放置代码来测试树是否还没有信息，并将假人放置在那里以指示其"penging"状态并使请求排队？

到目前为止尝试过：

  • 组件的constructor – 道具尚未设置在那里;
  • componentWillMount() – 第一次渲染从树的旧状态开始，尽管设置虚拟值后tree.commit();
  • 在动态创建组件的分支函数中，光标指向其数据。收到警告：

setState（...）：在现有状态转换期间（例如在 render 内）无法更新。渲染方法应该是 props 和状态的纯函数。

这可以提高一级来解决 - 一旦ID列表可用。但是，组件应该能够在自身内部处理其数据，这感觉是正确的。

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

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

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

>猴面包树有一个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);
  }
相关文章：