TypeError: невозможно прочитать свойство '0' нулевого значения, реакция-полная страница - PullRequest
Новая
       0

TypeError: невозможно прочитать свойство '0' нулевого значения, реакция-полная страница

1 голос
/ 09 мая 2020 
   <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: невозможно прочитать свойство '0', равное null

Спасибо, вся помощь приветствуется.

1 Ответ

1 голос
/ 09 мая 2020

Проблема здесь в том, что ReactFullPage работает по принципу поиска раздела className в одном из отображаемых элементов

Теперь, когда вы загружаете свои элементы asyn c, сначала отображается следующий контент 

    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>
...