Codepen - ChildStackTest

Question

我想要一个简单的数组，单击按钮后，该数组将重新排列数组，然后立即将新数组呈现到页面上。

一旦页面加载并且当我单击Shuffle按钮时shuffle（）函数成功调用完成，数组就会被重新排序，但是更改永远不会显示给用户。我试过显式设置状态并使用this.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"));

Codepen - ChildStackTest

如何将更改显示给用户？

Answer 1

您直接在这些行上更改状态：

let shuffledArray = this.state.cardsInDeck;

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

可能是问题的根源...

Answer 2

问题不在于组件的呈现，而在于shuffle()方法本身。问题似乎出在这里：

let shuffledArray = this.state.cardsInDeck;

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

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

然后，更改此行：

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

收件人：

let temp = shuffledArray[c];

它应该可以工作。

工作叉：https://codepen.io/anon/pen/xJdNQO?editors=0011

在状态下修改数组不会呈现到页面

Codepen - ChildStackTest

2 个答案: