类型错误。无法读取null, react-fullpage的属性'0'。

Question

   <div className="left">
  <ReactFullpage
      licenseKey='xxxxxxxx-xxxxxxxx-xxxxxxxx-xxxxxxxx'
      sectionsColor={["#000000"]}
      render={({ state, fullpageApi }) => {
          return (
              <div id="fullpage-wrapper">
              {this.state.items == undefined ? '' : this.state.items.map((img,i) => (
                <img className="section" key={i} src={img.image}></img>
            ))}
              </div>
          );
      }}
  />

  </div>

嗨，我有一些问题，当我试图获取数据并在ReactFullpage组件中渲染时，错误说。

TypeError.Canot read property '0' of null: 无法读取null的属性'0'。

谢谢，欢迎大家帮忙。

Answer 1

这里的问题是，ReactFullPage的工作原理是在渲染的元素中找到一个className部分。

现在，由于你的项目是异步加载的，所以最初会呈现以下内容

    return (
          <div id="fullpage-wrapper">
          {''}
          </div>
      );

请注意，它没有一个className的部分，并向你抛出错误

这里的解决方案是，要么等待项目加载后再显示ReactFullPage。

    <div className="left">
      {this.state.items && <ReactFullpage
          licenseKey='xxxxxxxx-xxxxxxxx-xxxxxxxx-xxxxxxxx'
          sectionsColor={["#000000"]}
          render={({ state, fullpageApi }) => {
              return (
                  <div id="fullpage-wrapper">
                  {this.state.items.map((img,i) => (
                    <img className="section" key={i} src={img.image}></img>
                  )}
                  </div>
              );
          }}
      />}
   </div>

或返回一个虚构组件给ReactFullPage。

<div className="left">
  <ReactFullpage
      licenseKey='xxxxxxxx-xxxxxxxx-xxxxxxxx-xxxxxxxx'
      sectionsColor={["#000000"]}
      render={({ state, fullpageApi }) => {
          return (
              <div id="fullpage-wrapper">
              {this.state.items == undefined ? <div className="section" /> : this.state.items.map((img,i) => (
                <img className="section" key={i} src={img.image}></img>
            ))}
              </div>
          );
      }}
  />
</div>