javascript - 理解 React 中 array.map() 范围的问题

Question

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

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>

Answer 1

看起来您从未设置过 this.shoppingCardsJSX 并且您还应该使用 this.removeCard.bind(this) 而不是 this.removeCard code> 作为 prop，因为这样它就可以在调用时引用 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>