Блог

Я работаю в React, пытаясь автоматизировать свою домашнюю страницу (используя компонент для рендеринга компонентов макета начальной загрузки) и рендеринга изображений из файла ресурсов. Обещание возвращает модуль, который имеет доступ к файловому местоположению, которое мне нужно вернуть в конечном итоге. Однако каждый раз, когда я пытаюсь получить к нему доступ (.then(val => val.default[0]), он отправляет другое обещание, которое должно быть выполнено. Я пытался добавить больше .затем, однако, он продолжает давать мне одно и то же обещание снова и снова.

Вот код :

 function ReviewSection(props){

  function renderPics(numRow, numCol) {
    var render =  [];
    var children = [];

    async function getPics(index){
      var location = await import("./assets/img/index")
      .then(val => val.default[index])
      .then(data => data)
      .catch(err => console.log(err));

      return location
    }

    for (let i = 0; i < numRow; i  ) {
      for (let x = 0; x < numCol; x  ) { 
        if(x % 2 === 0){
          console.log(getPics(x).then(val => val.default[0]))
          children.push(<Col><Image src={getPics(x)}/></Col>)
        }
        else{
          children.push(<Col><div style={{width: "4rem"}}></div></Col>)
        }
      }
      render.push(<Row>{children.map(val => val)}</Row>)
      children = [];
    }
    return render.map(val => val)
  }

  return (
    <Container >
      <Row>
        <Col>
          {renderPics(props.rows, props.cols)}
        </Col>
      </Row>
    </Container>
  )
}
  

Файл ./assets/img/index выглядит следующим образом :

 // images.js



var trustedPartners = {
  0: require('./trustedPartners/remax-logo-og.jpg'),
  1: require('./trustedPartners/coldwell.jpeg'),
  2: require('./trustedPartners/bluediamond.jpg'),
  3: require('./trustedPartners/exp.png'),
  4: require('./trustedPartners/greglynn.png'),
  5: require('./trustedPartners/kingsway.png'),
  6: require('./trustedPartners/liveurban.jpg'),
  7: require('./trustedPartners/maison.jpg'),
  8: require('./trustedPartners/prb.png'),
  9: require('./trustedPartners/rebroker.jpg'),
  10: require('./trustedPartners/woods.jpg'),
  11: require('./trustedPartners/paigefulton.jpg'),
  12: require('./trustedPartners/atlas.png'),
  13: require('./trustedPartners/meinhaus.png')
}


export default trustedPartners
  

Вот консоль Chrome:

Это неправильный способ использования promise. Вы должны использовать обратный вызов, чтобы вернуть значение выборки из API. Другой способ заключается в том, что вы возвращаете ответ API, а не весь API.

 function ReviewSection(props) {

function renderPics(numRow, numCol) {
    var render = [];
    var children = [];

    async function getPics(index) {
        var location = await import("./assets/img/index")
            .then(val => {
                return val.default[index];
            }).catch(err => {
                console.log(err)
                return '';
            });
    }

    for (let i = 0; i < numRow; i  ) {
        for (let x = 0; x < numCol; x  ) {
            if (x % 2 === 0) {
                console.log(getPics(x))
                children.push(<Col><Image src={getPics(x)}/></Col>)
            } else {
                children.push(<Col>
                    <div style={{width: "4rem"}}></div>
                </Col>)
            }
        }
        render.push(<Row>{children.map(val => val)}</Row>)
        children = [];
    }
    return render.map(val => val)
}

return (
    <Container>
        <Row>
            <Col>
                {renderPics(props.rows, props.cols)}
            </Col>
        </Row>
    </Container>
)
  

}

Это должно сработать у вас.