TypeError: Cannot read property '0' of null, react-fullpage

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: Cannot read property '0' of null

谢谢，欢迎大家的帮助。

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>

或return 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>

TypeError: Cannot read property '0' of null, react-fullpage

TypeError: Cannot read property '0' of null, react-fullpage

javascript

reactjs

fullpage.js

react-native