如何等到设置上下文值？答案

【问题标题】：How to wait until context value is set?如何等到设置上下文值？
【发布时间】：2020-05-20 01:55:25
【问题描述】：

我正在尝试渲染标题。

首先，在 InnerList.js 中，我进行 API 调用，并使用来自 API 调用的数据，在上下文中设置一个列表。

其次，在 Context.js 中，我获取列表并将其设置为特定数据。

然后，在 InnerListHeader.js 中，我使用特定数据在标头内呈现。

问题：我目前得到一个未定义的 TypeError，因为在渲染之前没有设置上下文。有没有办法在加载之前通过异步或其他方式等待数据设置？

我的代码块在下面。我一直在查看有关 StackOverflow 和博客的很多问题，但无济于事。谢谢！

InnerList.js

  componentDidMount() {
    const { dtc_id } = this.props.match.params;

    const {
      setSpecificDtcCommentList,
    } = this.context;

    MechApiService.getSpecificDtcCommentList(dtc_id)
      .then(res => 
        setSpecificDtcCommentList(res)
      )
  }

  renderSpecificDtcCommentListHeader() {
    const { specificDtc = [] } = this.context;
    return (
      <InnerDtcCommentListItemHeader key={specificDtc.id} specificDtc={specificDtc} />
      )
  }

上下文.js

  setSpecificDtcCommentList = (specificDtcCommentList) => {
    this.setState({ specificDtcCommentList })
    this.setSpecificDtc(specificDtcCommentList)
  }

  setSpecificDtc = (specificDtcCommentList) => {
    this.setState({ specificDtc: specificDtcCommentList[0] })
  }

InnerListHeader.js

  render() {
    const { specificDtc } = this.props;

    return (
      <div>
        <div className="InnerDtcCommentListItemHeader__comment">
          {specificDtc.dtc_id.dtc}
        </div>
      </div>
    );
  }

【问题讨论】：

标签： javascript reactjs react-hooks react-context

【解决方案1】：

通常，您应该始终考虑到变量可以在没有适当值的情况下到达渲染阶段（例如未设置）。这取决于你防止崩溃。

例如，您可以将 sn-p 改写如下：

  render() {
    const { specificDtc } = this.props;

    return (
      <div>
        <div className="InnerDtcCommentListItemHeader__comment">
          {Boolean(specificDtc.dtc_id) && specificDtc.dtc_id.dtc}
        </div>
      </div>
    );
  }

【讨论】：

这似乎不适用于所有场景。有没有其他方法可以解决同样的问题？
您指的是哪种情况？目标是要么拥有一个能够正确评估其值的函数，要么将其短路并返回 false，从而指示 React 不渲染任何内容。
设置上下文似乎需要时间。有时上下文为空（未定义），有时则不是。上述解决方案中的条件运算符适用于原始帖子中提到的特定示例。条件运算符在需要设置上下文的其他场景中不起作用。我有一个代码库，看起来与这里提到的几乎相同，但在这种情况下它不起作用。
gist.github.com/peyo/fd9c58d7f644cab7ca37e650f86dfc63 有关完整示例，请参阅此要点。看起来 renderFilteredDtcCommentListHeader() 在 componentDidMount() 之前呈现并导致未定义的 TypeError。有没有办法延迟 renderFiltered... 直到 componentDidMount() 完全运行？
@peyo componentDidMount 方法在第一次渲染后调用：这是设计使然。您需要的是仅在正确加载所有基本变量时执行实际渲染。那么，我认为您应该考虑像其他答案一样的方法。只有在一切正常时才会设置一个标志，在此之前组件将呈现类似于“等待指示”的东西。

【解决方案2】：

当您进行 api 调用时，您可以在从 api 获取数据的同时设置一个加载器，一旦它在那里，您就会显示将呈现该数据的组件。在您的示例中，您可以添加一个新状态，将 api 调用状态传递给这样的孩子

render() {
    const { specificDtc, fetchingData  } = this.props;
     if (fetchingData){
      return <p>Loading</p>
     }else{
     return (
      <div>
        <div className="InnerDtcCommentListItemHeader__comment">
          {specificDtc.dtc_id.dtc}
        </div>
      </div>
    );
}
    }
``

【讨论】：