当我有两个内部循环时，无法获得父属性这个属性

IT技术 javascript reactjs react-jsx
2021-05-06 05:27:00

我有一个复杂的场景，我真的很困惑如何处理它。我有一个数组如下：

stories=[
    {
        "categ": "politics",
        "arr": [{
            "t": 1
        }, {
            "t": 2
        }, {
            "t": 3
        }]
    }, 
    {
        "categ": "Business",
        "arr": [{
            "t": 1
        }, {
            "t": 2
        }, {
            "t": 3
        }]
    }
]

正如你所看到的，这个数组里面有另一个数组，根据执行的内容，我需要遍历第一个数组并在第一个数组中找到合适的数组。因此，例如，如果我想获取与业务类别相关的数组，我需要遍历第一个数组并选择与业务相关的数组。为此，我有以下代码：

<div className="row">
                {
                    this.props.stories.map((item,i)=> <Story key={i}   position={i} story={item} ></Story>)

                }
            </div>

所以你可以看到，使用 map 我可以遍历第一个数组。现在考虑到通过使用this.props.categ我可以访问我想要的类别。所以我必须将我的代码更改为如下所示：

 <div className="row" >
                {

                 this.props.stories.map(function(snippet){
                     if(snippet.categ==="politics"){
                     return(
                         snippet.arr.map((item,i)=> <Story key={i} position={i} story={item} ></Story>)


                     );

                     }
                 })
                }
            </div>

但是在上面的代码中，“politics”是硬编码的，应该用 this.props.categ 替换。但是，一旦我更换它，我就会收到错误消息

未捕获的类型错误：无法读取未定义的属性“props”

这是完全有道理的，因为我失去了父级，因为我不使用 es6 胖箭头。现在如何才能使这项工作？

2个回答

您可以像绑定外部地图功能

 <div className="row" >
            {

             this.props.stories.map(function(snippet){
                 if(snippet.categ===this.props.categ){
                 return(
                     {snippet.arr.map((item,i)=> <Story key={i} position={i} story={item} ></Story>})


                 );

                 }
             }.bind(this))
            }
        </div>

这将允许您映射函数来引用prop可用的外部上下文。你也忘了在里面包含你的内部地图功能{}

另一种选择是使用箭头功能

 <div className="row" >
            {

             this.props.stories.map(snippet) => {
                 if(snippet.categ===this.props.categ){
                 return(
                     {snippet.arr.map((item,i)=> <Story key={i} position={i} story={item} ></Story>})


                 );

                 }
             }.bind(this))
            }
        </div>

进入函数前保存this到that。

然后使用that.props.categ来指代外层this.

如果这有任何意义：D

像这样：

render(){
    // place here
    // at the top of render function
    // but outside the return
    var that = this;

    return (
        {something.map(function(snippet){
           if (snippet.categ === that.props.categ){
               // do things here
           }
        })}
    );

}
其它你可能感兴趣的问题
上一篇当 12 V 打开时 Printrun 不连接 下一篇在获得第一层支持时遇到困难