当我有两个内循环时无法得到 parent 属性这个属性

Question

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

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代替。但是，一旦我替换它，我就会收到错误提示

Uncaught TypeError: Cannot read property 'props' of undefined

这完全有道理，因为我失去了 parent 这个，因为我不使用 es6 胖箭头。现在如何使它起作用？

Answer 1

在进入函数之前将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
           }
        })}
    );

}

Answer 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>

当我有两个内循环时无法得到 parent 属性这个属性

cannot get the parent property this property when I have two inner loop

javascript

reactjs

react-jsx

当我有两个内循环时无法得到 parent 属性 这个 属性

cannot get the parent property this property when I have two inner loop

javascript

reactjs

react-jsx

当我有两个内循环时无法得到 parent 属性这个属性