Question

我对React很陌生。

在render的map函数中，我提供prodID作为参数，并且该值是动态的。当我尝试将该值传递到函数中并返回该值（第一个带注释的返回值）时，它将正确地将innerHTML设置为我的ID的值。但是，当我尝试使用该ID在forEach中实际找到一个不同的值并返回该值时，不会呈现任何输出。

我认为这是因为dangerouslySetInnerHTML在forEach完成之前正在重新渲染组件？

getProductNameByID(id) {
    //return {__html: id};
    this.props.products.forEach(p => {
        if (p.id === id) {
            console.log(p.title);
            return {__html: p.title};
        }
    });
}

<li key={prodID} dangerouslySetInnerHTML={this.getProductNameByID(prodID)} />

Answer 1

请注意，您的return具有粗箭头功能。它不会不提供getProductNameByID()的返回值。 forEach()对回调函数的返回值不执行任何操作。相反，您应该使用map()：

this.props.products.map(p => 
    <li key={p.id}>p.title</li>
);

请注意，无需使用dangerouslySetInnerHTML。

如果我在forEach循环中返回一个字符串，为什么为什么我会危险地设置SetInnerHTML？

1 个答案: