尝试setState到包含对象的状态数组的特定索引时出错

Question

我正在尝试更改特定卡片组件onPress中"show“的状态。onPress I过滤以获取对象，并将show的值设置为true。当我通过控制台记录已更改的数组时，我可以看到更改，但当我显示时，我得到错误"TypeError: Cannot read property‘setState’of undefined“

我认为问题在于，当我初始化应用程序时，我从“卡片”拼接(这是为了不复制重复)，并且setState呈现CardBox组件(并且“卡片”是空的)，而不仅仅是卡片。谁能给我指出解决这个问题的正确方向。

export default class CardBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected_cards: [],
      rnd_card_list: [],

      cards: [
        {
          id: 1,
          name: "star",
          color: "#ffeaa5",
          show: false
        },
        {
          id: 2,
          name: "heart",
          color: "#f3c1c6",
          show: false
        },
        {
          id: 3,
          name: "headphones",
          color: "#f58b54",
          show: false
        },
        {
          id: 4,
          name: "bell-o",
          color: "#107595",
          show: false
        },
        {
          id: 5,
          name: "video-camera",
          color: "#ff0b55",
          show: false
        },
        {
          id: 6,
          name: "pencil",
          color: "#a34a28",
          show: false
        },
        {
          id: 7,
          name: "star",
          color: "#ffeaa5",
          show: false
        },
        {
          id: 8,
          name: "heart",
          color: "#f3c1c6",
          show: false
        },
        {
          id: 9,
          name: "headphones",
          color: "#f58b54",
          show: false
        },
        {
          id: 10,
          name: "bell-o",
          color: "#107595",
          show: false
        },
        {
          id: 11,
          name: "video-camera",
          color: "#ff0b55",
          show: false
        },
        {
          id: 12,
          name: "pencil",
          color: "#a34a28",
          show: false
        }
      ]
    };
  }

  handlePress = s_card => {
    let rnd_list = this.state.rnd_card_list;
    let x = rnd_list.indexOf(s_card);

    var sCard = rnd_list.filter(card => card.id === s_card.id);
    sCard[0].show = true;

    rnd_list[x] = sCard[0];

    this.setState({ rnd_list });

    // if (this.state.selected_cards.length === 2) {
    //   if (
    //     this.state.selected_cards[0].name === this.state.selected_cards[1].name
    //   ) {
    //     alert("Same");
    //   } else {
    //     alert("Not Same");
    //   }
    //   this.state.selected_cards.pop();
    //   this.state.selected_cards.pop();
    // }
  };

  shuffle = arr => {
    for (var i = arr.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
    }
  };

  initGame = cards => {
    let rndGrid = [];

    for (var i = 0; i < 12; i++) {
      var randomInd = Math.floor(Math.random() * Math.floor(cards.length - 1));

      var card = cards[randomInd];

      this.state.rnd_card_list.push(card);

      cards.splice(randomInd, 1);
    }
    this.shuffle(this.state.rnd_card_list);

    for (var i = 0; i < 12; i++) {
      rndGrid.push(
        <Card
          key={i}
          handlePress={this.handlePress}
          card={this.state.rnd_card_list[i]}
        />
      );
    }
    return rndGrid;
  };

  render() {
    return (
      <StyledCardContainer>
        {this.initGame(this.state.cards)}
      </StyledCardContainer>
    );
  }
}

-------------------------------------------------------

//card component

export default class Card extends React.Component {
  render() {
    let icon_name = "question";
    let icon_color = "black";
    if (this.props.card.show) {
      icon_name = this.props.card.name;
      icon_color = this.props.card.color;
    }

    return (
      <TouchableOpacity onPress={() => this.props.handlePress(this.props.card)}>
        <StyledCard>
          <FontAwesome name={icon_name} size={40} color={icon_color} />
        </StyledCard>
      </TouchableOpacity>
    );
  }
}

Answer 1

你的代码中有一个小错误，特别是这里：

this.setState({ rnd_list });

你必须告诉React你想要更新状态的哪一部分，在这种情况下你想要更新cards数组，否则React将用卡片数组重写所有内容

this.setState({ cards: rnd_list });