ReactJS 承诺不会兑现答案

【问题标题】：ReactJS promise won't fulfillReactJS 承诺不会兑现
【发布时间】：2020-08-20 11:31:52
【问题描述】：

我正在使用 React 尝试自动化我的主页（使用组件来呈现引导布局组件）并从资产文件呈现图片。承诺返回一个模块，该模块可以访问我需要作为最终返回的 fileLocation。但是，每次我尝试访问它时（.then(val => val.default[0])，它都会发送另一个要解决的承诺。我尝试添加更多 .then 但是它一遍又一遍地给我同样的承诺。

代码如下：

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 控制台：

【问题讨论】：

查看useState 和useEffect。这些钩子是处理此类异步行为的关键组件。

标签： javascript reactjs async-await es6-promise

【解决方案1】：

这不是使用 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>
)

}

它应该适合你。

【讨论】：