Question

我已经完成了一个遍历json文件（goods.json）的array.map（）。然后，我想对其进行一些操作（例如，想要从此数组中的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作为道具，因为这样在调用它时它可以引用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>

Answer 2

运行代码段似乎返回错误，因为您实际上从未为组件设置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>
      )
    }
}

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

但是不要将两者混在一起。

Answer 4

使用箭头功能，因为它们默认是绑定的。您不需要绑定这些箭头功能。

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

在React中理解array.map（）范围的问题

4 个答案: