Изменение массива в состоянии не отображает страницу

Я хочу иметь простой массив, который при нажатии кнопки перетасовывает массив, а затем мгновенно отображает новый массив на страницу.

Массив перетасовывается после загрузки страницы и const Card = props => {return (<p> {props.title}: {props.text} </ p>); }; класс Deck расширяет React.Component {конструктор (реквизит) {супер (реквизит); this.shuffle = this.shuffle.bind (this); this.state = {title: props.title, count: props.cards.length, cardsInDeck: props.cards}; this.shuffle (); } shuffle (e) {console.log ("перетасовка" + this.state.title + "..."); пусть c = this.state.cardsInDeck.length; let shuffledArray = this.state.cardsInDeck; while (c> 0) {пусть 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 ({cardInDeck: 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} </ h5> <button type = "button" className = "btn btn-info" onClick = {this.shuffle}> Shuffle </ button> </ div> </ div> {this.state.cardsInDeck} </ div>); }} var jobs = [{title: "job1", текст: "30", return: "20"}, {title: "job2", текст: "40", return: "30"}, {title: " job3 ", текст:" 50 ", return:" 40 "}, {title:" job4 ", текст:" 50 ", return:" 40 "}, {title:" job5 ", текст:" 50 ", return : "40"}, {title: "job6", текст: "50", return: "40"}, {title: "job7", текст: "60", return: "50"}]; const jobItems = jobs.map (job => (<Ключ карты = {job.title} title = {job.title} text = {job.text + "" + job.return} />)); var workers = [{name: "worker1", стоимость: "30"}, {name: "worker2", стоимость: "30"}, {name: "worker3", стоимость: "30"}, {name: " «рабочий», «30»}, {имя: «рабочий5», стоимость: «30»}, {имя: «рабочий6», стоимость: «30»}, {имя: «рабочий7», стоимость: «30», }]; const workerItems = workers.map (worker => (<Ключ карты = {worker.name} title = {worker.name} text = {worker.cost} />)); class app расширяет 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")); функция успешно завершается, когда я нажимаю кнопкуShuffle, но изменение никогда не будет отображаться пользователю. Я попытался установить состояние явно и используя this.setState (), и ни одно из них не приводит к рендерингу массива.

shuffle()

Codepen - ChildStackTest

Как я могу получить это изменение для пользователя?

arrays,reactjs,

1

Ответов: 2


1 принят

Проблема заключается не в рендеринге ваших компонентов, а в 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


1

Вы мутируете состояние непосредственно в этих строках:

let shuffledArray = this.state.cardsInDeck;

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

Может быть источником проблемы ...

Массивы, reactjs,
Похожие вопросы