当前位置: 首页 > 面试题库 >

在render方法中使用承诺来渲染React组件

华哲茂
2023-03-14
问题内容

我有一个组件,该组件获取作为道具的项目map集合,并将其作为呈现为父组件子项的组件集合。我们使用WebSQL以字节数组形式存储的图像。在map函数中,我从项目中获取图像ID,并异步调用,DAL以获取图像的字节数组。我的问题是我不能将诺言传播到React中,因为它不是设计来处理渲染中的诺言的(无论如何我还是不能说的)。我来自C#背景,所以我猜我在寻找类似await关键字的内容来重新同步分支代码。

map函数看起来像这样(简化):

var items = this.props.items.map(function (item) {
        var imageSrc = Utils.getImageUrlById(item.get('ImageId')); // <-- this contains an async call
        return (
            <MenuItem text={item.get('ItemTitle')}
                      imageUrl={imageSrc} />
       );
    });

getImageUrlById方法如下所示:

getImageUrlById(imageId) {
    return ImageStore.getImageById(imageId).then(function (imageObject) { //<-- getImageById returns a promise
       var completeUrl = getLocalImageUrl(imageObject.StandardConImage);
       return completeUrl;
    });
}

这是行不通的,但是我不知道需要进行哪些修改才能使其正常工作。我尝试向链中添加另一个Promise,但是由于我的render函数返回一个Promise而不是合法的JSX,因此出现错误。我当时在想,也许我需要利用一种React生命周期方法来获取数据,但是由于我需要props已经存在该方法,所以我不知道该在哪里进行操作。


问题答案:

render()方法应该从渲染UI
this.propsthis.state,所以异步加载数据,则可以使用this.state存储imageId: imageUrl的映射。

然后,在您的componentDidMount()方法中,您可以imageUrl从填充imageId。然后,render()通过渲染this.state对象,
该方法应该是纯粹而简单的

请注意,this.state.imageUrls异步填充了,因此渲染的图像列表项在获取其网址后将一一显示。您还可以this.state.imageUrls使用所有图片ID或索引(不带网址)初始化,这样您可以在加载图片时显示加载器。

constructor(props) {
    super(props)
    this.state = {
        imageUrls: []
    };
}

componentDidMount() {
    this.props.items.map((item) => {
        ImageStore.getImageById(item.imageId).then(image => {
            const mapping = {id: item.imageId, url: image.url};
            const newUrls = this.state.imageUrls.slice();
            newUrls.push(mapping);

            this.setState({ imageUrls: newUrls });
        })
    });
}

render() {
    return (
      <div>
        {this.state.imageUrls.map(mapping => (
            <div>id: {mapping.id}, url: {mapping.url}</div>
        ))}
      </div>
    );
}


 类似资料:
  • 问题内容: 我正在尝试使用setState()方法将容器中的React状态变量重置为默认值。但是出现以下错误 最后:超出最大调用堆栈大小。 我的代码如下: 当Redux状态的变量为true时,我正在调用resetMsg()。 我在其中调用resetMsg的代码(resetMessages的值最初为false,当它为true时,我需要重置React状态): 问题答案: 您可能要研究功能。根据官方文档

  • 我有一个组件,它获取作为道具的项目集合,并将它们映射到作为父组件的子组件呈现的组件集合。我们使用存储在WebSQL中的图像作为字节数组。在函数中,我从项中获取图像ID,并对进行异步调用,以获取图像的字节数组。我的问题是,我不能在React中传播这个promise,因为它不是为了处理渲染中的promise而设计的(至少我可以告诉你)。我来自一个背景,所以我想我正在寻找类似于关键字的东西来重新同步分支

  • 嗨,我是新来的反应本机和尝试渲染组件调用一个函数内渲染,但它似乎不工作。 我的职能: 如果我这样做,效果会更好: 但不是这个: 我不明白为什么第二个代码不起作用

  • 问题内容: 我有一个要显示字符串数组的组件。代码看起来像这样。 运行正常。例如,如果 props.data = [‘tom’,’jason’,’chris’] 页面中呈现的结果将为 tomjasonchris 然后,我想使用逗号连接所有名称,因此我将代码更改为 但是,渲染的结果是 [Object],[Object],[Object]。 我不知道如何解释对象成为要渲染的反应组件。有什么建议吗? 问题

  • 问题内容: 我在尝试使用数据数组呈现元素时遇到问题。在的下面的代码中,可以正常工作,但列表项未出现。 我究竟做错了什么?请随时指出并非最佳做法的任何内容。 问题答案: GoshaArinich是正确的,您应该返回您的元素。但是,在这种情况下,您应该在浏览器控制台中收到讨厌的红色警告 数组或迭代器中的每个子代都应具有唯一的“键”道具。 因此,您需要在列表中添加“键”: 或使用es6 箭头功能放下并做

  • 问题内容: 是否可以从外部源获取HTML / JSX内容并在React中动态呈现它?在我们的例子中,我们想从Wordpress API中获取内容,并在客户端和服务器上都进行渲染(我们正在使用NextJS) 因此,Wordpress API返回一个JSON响应,其中包括一个content属性,该属性是一串HTML / JSX。内容看起来像这样。 因此,如您所见,它将是HTML和React组件/ JS