Arrays 在状态下修改数组不会'；不要渲染到页面

我想有一个简单的数组，点击一个按钮就可以将数组洗牌，然后立即将新数组呈现到页面上

当我单击

shuffle

按钮时，一旦页面加载并成功调用shuffle（）函数完成，数组就会被洗牌，但更改永远不会显示给用户。我尝试过显式设置状态并使用此.setState（），但两者都不会导致呈现数组更改

const Card = props => {
  return (
    <p>
      {props.title}: {props.text}
    </p>
  );
};

class Deck extends React.Component {
  constructor(props) {
    super(props);
    this.shuffle = this.shuffle.bind(this);
    this.state = {
      title: props.title,
      count: props.cards.length,
      cardsInDeck: props.cards
    };

    this.shuffle();
  }

  shuffle(e) {
    console.log("shuffling " + this.state.title + "...");

    let c = this.state.cardsInDeck.length;
    let shuffledArray = this.state.cardsInDeck;
    while (c > 0) {
      let index = Math.floor(Math.random() * c);
      c--;
      let temp = this.state.cardsInDeck[c];
      shuffledArray[c] = shuffledArray[index];
      shuffledArray[index] = temp;
    }

    //this.state.cardsInDeck = shuffledArray;
    this.setState({cardsInDeck: shuffledArray});

    console.log("done shuffling " + this.state.title + "...");
  };

  render() {
    return (
      <div>
        <div className="card">
          <div className="card-body">
            <h5 className="card-title">{this.state.title} - {this.state.count} cards</h5>
            <button type="button" className="btn btn-info" onClick={this.shuffle}>
              Shuffle
            </button>
          </div>
        </div>
        {this.state.cardsInDeck}
      </div>
    );
  }
}

var jobs = [
  { title: "job1", text: "30", return: "20" },
  { title: "job2", text: "40", return: "30" },
  { title: "job3", text: "50", return: "40" },
  { title: "job4", text: "50", return: "40" },
  { title: "job5", text: "50", return: "40" },
  { title: "job6", text: "50", return: "40" },
  { title: "job7", text: "60", return: "50" }
];

const jobItems = jobs.map(job => (
  <Card key={job.title} title={job.title} text={job.text + " " + job.return} />
));

var workers = [
  { name: "worker1", cost: "30" },
  { name: "worker2", cost: "30" },
  { name: "worker3", cost: "30" },
  { name: "worker4", cost: "30" },
  { name: "worker5", cost: "30" },
  { name: "worker6", cost: "30" },
  { name: "worker7", cost: "30" }
];

const workerItems = workers.map(worker => (
  <Card key={worker.name} title={worker.name} text={worker.cost} />
));

class App extends React.Component {
  render() {
    return (
      <div className="row">
        <div className="col">
          <Deck title="Jobs" cards={jobItems} />
        </div>
        <div className="col">
          <Deck title="Workers" cards={workerItems} />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

const Card=props=>{
返回(

{props.title}:{props.text}

);
};
类组扩展了React.Component{
建造师（道具）{
超级（道具）；
this.shuffle=this.shuffle.bind（this）；
此.state={
标题：props.title，
计数：道具、卡片、长度，
卡片：道具。卡片
};
这个。shuffle（）；
}
洗牌（e）{
log（“shuffling”+this.state.title+”）；
设c=this.state.cardsInDeck.length；
让shuffledArray=this.state.cardsInDeck；
而（c>0）{
让index=Math.floor（Math.random（）*c）；
c--；
设temp=this.state.cardsInDeck[c]；
shuffledArray[c]=shuffledArray[index]；
ShuffleArray[索引]=温度；
}
//this.state.cardsInDeck=shuffledArray；
this.setState（{cardsInDeck:shuffledArray}）；
log（“完成洗牌”+this.state.title+”）；
};
render（）{
返回(
{this.state.title}-{this.state.count}卡片
洗牌
{this.state.cardsInDeck}
);
}
}
变量作业=[
{标题：“job1”，正文：“30”，返回：“20”}，
{标题：“job2”，正文：“40”，返回：“30”}，
{标题：“job3”，文本：“50”，返回：“40”}，
{标题：“job4”，文本：“50”，返回：“40”}，
{标题：“job5”，文本：“50”，返回：“40”}，
{标题：“job6”，正文：“50”，返回：“40”}，
{标题：“job7”，正文：“60”，返回：“50”}
];
const jobItems=jobs.map（job=>(
));
var工人=[
{名称：“工人1”，费用：“30”}，
{名称：“工人2”，费用：“30”}，
{名称：“工人3”，费用：“30”}，
{名称：“工人4”，费用：“30”}，
{名称：“工人5”，费用：“30”}，
{名称：“工人6”，费用：“30”}，
{名称：“工人7”，费用：“30”}
];
const workerItems=workers.map（worker=>(
));
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
ReactDOM.render(
如何将此更改显示给用户？
您正在这些行上直接改变状态：

let shuffledArray = this.state.cardsInDeck;

shuffledArray[c] = shuffledArray[index];
shuffledArray[index] = temp;

可能是问题的根源…
问题不在于组件的呈现，而在于
shuffle（）
方法本身。问题似乎在于：

let shuffledArray = this.state.cardsInDeck;

这将创建一个变量，该变量保存对状态变量的引用，而不是供您处理的本地副本。正确的方法是：

let shuffledArray = this.state.cardsInDeck.slice();

然后，更改此行：

let temp = this.state.cardsInDeck[c];

致：

它应该会起作用


工作叉：
当我将
shuffledArray
指定为
this.state.cardsInDeck
时，它是通过引用分配的吗？所以我对
shuffledArray
所做的任何更改都会被指定为
this.state.cardsInDeck
？我认为javascript总是按对象分配的？看看这篇文章……它提到了你的问题，并且给出了一些很好的解决方案…+1啊，所以它毕竟是通过引用赋值的，所以对[ShuffleArray]的任何更改都会修改状态，这应该被视为不可变。这肯定是我问题的根源。谢谢！这很有效。使用slice（）将其作为副本而不是参考是非常有创意的。谢谢！很高兴它有帮助。如果您喜欢ES6，也可以使用
[…this.state.cardsInDeck]
进行复制，如果您喜欢这种语法。
let temp = shuffledArray[c];