在 React 中理解 array.map() 范围的问题答案

【问题标题】：Problems with understanding of array.map() scope in React在 React 中理解 array.map() 范围的问题
【发布时间】：2018-10-10 22:42:24
【问题描述】：

我已经完成了一个遍历 json 文件 (goods.json) 的 array.map()。然后我想对它进行一些操作（例如，想在 removeCard(obj) 方法中从这个数组中删除项目）。渲染没问题，但问题是我不明白为什么我在 removeCard(obj) 方法中看不到 shoppingCardsJSX 数组，总是不够精确。我已经阅读了 How to delete a ToDo Item onClick in React? 和 @987654322 中的答案@但不幸的是我不明白它是如何工作的。你能帮我找出我做错了什么吗？希望这部分代码能说明我的问题，

import { sample } from 'rxjs/internal/operators';
import React from 'react';
import ShoppingCard from './ShoppingCard';
import goods from './goods.json';

export default class ShoppingCards extends React.Component {
    constructor (props){
        super(props);
    }
    removeCard(obj){
        console.log("fireeeee");
        console.log(obj);
        console.log(this.shoppingCardsJSX);
    }
    render() {
        console.log("render");
        let shoppingCardsJSX = goods.map((good) => {
            return (
                <ShoppingCard
                    key = {good.id }
                    goodId = {good.id}
                    src = {good.src}
                    price = {good.price}
                    onRemoveCard={this.removeCard}
                />
            );
        });
        console.log(shoppingCardsJSX);
        return shoppingCardsJSX;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【问题讨论】：

您确定 goods 包含任何内容吗？你可以 console.log 确定一下吗？
是的，它包含

标签： javascript reactjs scope

【解决方案1】：

看起来您从未设置过this.shoppingCardsJSX，而且您还应该使用this.removeCard.bind(this) 而不是this.removeCard 作为道具，因为这样它可以在调用时引用this。

import { sample } from 'rxjs/internal/operators';
import React from 'react';
import ShoppingCard from './ShoppingCard';
import goods from './goods.json';

export default class ShoppingCards extends React.Component {
    constructor (props){
        super(props);
    }
    removeCard(obj){
        console.log("fireeeee");
        console.log(obj);
        console.log(this.shoppingCardsJSX);
    }
    render() {
        console.log("render");
        this.shoppingCardsJSX = goods.map((good) => {
            return (
                <ShoppingCard
                    key = {good.id }
                    goodId = {good.id}
                    src = {good.src}
                    price = {good.price}
                    onRemoveCard={this.removeCard.bind(this)}
                />
            );
        });
        console.log(this.shoppingCardsJSX);
        return this.shoppingCardsJSX;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【讨论】：

@prostyash 真棒很高兴能提供帮助！

【解决方案2】：

看起来运行代码 sn-p 正在返回错误，因为您实际上从未将 shoppingCardsJSX 设置为组件。您的 console.log(this.shoppingCardsJSX); 语句导致它出错

您可以随时尝试将其包装在 div 中：

import { sample } from 'rxjs/internal/operators';
import React from 'react';
import ShoppingCard from './ShoppingCard';
import goods from './goods.json';

export default class ShoppingCards extends React.Component {
    constructor (props){
        super(props);
    }
    removeCard(obj){
        console.log("fireeeee");
        console.log(obj);
    }
    render() {
        return (
           <div>
             {
              goods && goods.map((good) => {
                return (
                  <ShoppingCard
                    key = {good.id }
                    goodId = {good.id}
                    src = {good.src}
                    price = {good.price}
                    onRemoveCard={this.removeCard}
                  />
                );
              });
            }
        </div>
      )
    }
}

【讨论】：

【解决方案3】：

您应该使用箭头函数将this 关键字绑定到removeCard 函数，如下所示

removeCard = (obj) => {
        console.log("fireeeee");
        console.log(obj);
        console.log(this.shoppingCardsJSX);
    }

另一种方法是这样做

<ShoppingCard
    key = {good.id }
    goodId = {good.id}
    src = {good.src}
    price = {good.price}
    onRemoveCard={this.removeCard.bind(this}
/>

但是不要将两者混为一谈。

【讨论】：

【解决方案4】：

使用箭头函数，因为它们默认绑定。你不需要绑定这些箭头函数。

 removeCard=(obj)=>{
        console.log("fireeeee");
        console.log(obj);
        console.log(this.shoppingCardsJSX);
    }

【讨论】：