Javascript React中的条件渲染-加载DIV时卡住

晚上/早上

所以，这是我这几天来的第二次回到这里——戴着帽子。我在其他地方有这样的条件可以很好地工作，但在这里，我就是不能让“加载”div在“pageData”完全下载后消失。我已经用if/else试过了（在本例中我通常不使用）。如果有人能为我再次审视这件事，我将非常感激

import DataStore from "flux/stores/DataStore.js";

const ContentData = ({ pageData }) => {
  if (!pageData) {
    // evaluates to true if pageData is null
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h2>Homepage template</h2>
      <h1>{pageData.title.rendered}</h1>

      <div
        className="content"
        dangerouslySetInnerHTML={{ __html: pageData.content.rendered }}
      />
      <div>{pageData.acf.text}</div>
    </div> // render content
  );
};

class Home extends React.Component {
  render() {
    let pageData = DataStore.getPageBySlug("home");

    return (
      <div>
        <ContentData />
      </div>
    );
  }
}

export default Home;

---

您应该将

pageData

作为道具传递给

Is

数据存储。getPageBySlug（“home”）

异步？Thaks@samee-不幸的是，它不起作用。这是1000个版本中最新的一个——我以前试过（我又试过了）——干杯！谢谢如果它不是异步的，并且像samee所说的那样将其作为道具传递，则永远不应该显示加载指示器。可能是您的

getPageBySlug

错误？您是否尝试过

返回页面。查找（page=>page.slug===slug）|{}？是的，如果在
componentDidMount
中有一些异步逻辑，那么加载指示器是一个很好的主意，它最终将设置一些组件状态，作为
ContentData
的道具。但是，在这种情况下，如果您将
pageData
作为道具传递，并且您被赋予加载指示器，
DataStore.getPageBySlug
不得工作/不得为slug
主页返回任何内容。
// Returns a Page by provided slug
getPageBySlug(slug){
    const pages = this.getState().data.pages;
    return pages[Object.keys(pages).find((page, i) => {
        return pages[page].slug === slug;
    })] || {};
  }

  }