Question

对于令人困惑的标题感到抱歉，我真的不知道这是什么分类。我有一个关于更改设置为Array元素的变量的问题。我已经找到了实现我想要的方法，但这仍然困扰着我，所以我想我会问这里。

playCard(event){

    let tempArray = this.state.playerDeck;
    let playArray = this.state.playerDefaultCards;

    playArray.push(tempArray[event.target.id]);
    console.log(playArray[1].image);  //logs image data

    let tempObject = tempArray[event.target.id];
    tempObject.image = "Test";
    console.log(playArray[1].image); //logs "Test"
    tempArray[event.target.id] = tempObject;

    this.setState ({playerDeck: tempArray, playerDefaultCards: playArray});
    console.log(this.state.playerDefaultCards[1].image); //Also logs "Test"
  }

基本上我有两个带图像源的对象数组。单击图像时，我希望它从playerDeck转到playerDefaultCards，然后我只想将playerDeck中的图像源更改为空白字符串。

我认为如果我创建一个临时变量并将其设置为等于数组元素，则更改临时变量image属性然后将数组元素设置为等于该新对象，一切都会解决。

然而，当我更改tempObject.image =“Test”时，它会在tempArray和playArray中发生变化，据我所知，这不应该发生。这是我困惑的根源。

显然我错过了一些东西，但到目前为止我还没弄清楚。

Answer 1

playArray.push(tempArray[event.target.id])将tempArray[event.target.id]处的引用复制到对象而不是对象本身。

您可以使用Object.assign为要移动的card创建新对象，然后就可以编辑原始对象。

您还应该.slice()状态数组，以确保您不会在setState之外更改它们。

这样的事情：

playCard(event){

    const tempArray = this.state.playerDeck.slice();
    const playArray = this.state.playerDefaultCards.slice();

    const selectedCard = Object.assign({}, tempArray[event.target.id]);

    playArray.push(selectedCard);
    tempArray[event.target.id].image = "Test";

    this.setState({playerDeck: tempArray, playerDefaultCards: playArray}); 
}

值得注意的是setState很快，但不是即时的。在console.log之后调用的this.setState可能在更新完成之前执行并返回旧值。如果您需要在完成后立即执行某项操作，this.setState可以采用回调函数。

并非所有浏览器都支持

Object.assign，因此您可能需要使用polyfill。

Object.assign documentation

ReactJS变量发生在多个数组中

1 个答案: